Javascript canvas.toDataUrl() 在 Firefox 中未正确编码 [重复]答案

【问题标题】：Javascript canvas.toDataUrl() not encoding properly in Firefox [duplicate]Javascript canvas.toDataUrl() 在 Firefox 中未正确编码 [重复]
【发布时间】：2019-01-20 10:50:35
【问题描述】：

我正在尝试获取 SVG 并将其转换为 image/png 数据 URL。

在 Chrome 68 中它可以完美运行，但在 Firefox 61 中它会呈现一个空图像，其 URL 为：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAYAAADNkKWqAAABpElEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCnAUGaAAH3lkeeAAAAAElFTkSuQmCC P>

我的转换代码和 SVG 在下面找到。您可能会认识到，这几乎只是从其他人试图完成此任务的不同站点/问题中复制/粘贴。

function importSVG(sourceSVG, height = null, width = null) {

return new Promise(function (resolve, reject) {

    try {
        // https://developer.mozilla.org/en/XMLSerializer
        const svgString = (new XMLSerializer()).serializeToString(sourceSVG);
        let svgSize = sourceSVG.getBoundingClientRect();

        let canvas = document.getElementById('compass-canvas');
        canvas.width = width ? width : svgSize.width;
        canvas.height = height ? height : svgSize.height;

        let ctx = canvas.getContext('2d');
        let img = document.createElement('img');
        let svg = new Blob([svgString], {type: 'image/svg+xml;charset=utf-8'});
        let DOMURL = self.URL || self.webkitURL || self;
        let url = DOMURL.createObjectURL(svg);

        img.onload = (function () {
            ctx.drawImage(img, 0, 0);
            let png = canvas.toDataURL();
            DOMURL.revokeObjectURL(png);

            resolve({image: png});
        });

        img.onerror =
            img.onabort = function (e) {
                console.error('generateIcon : error on image', e);
            };

        img.src = url;
    }
    catch (e) {
        console.log('reject', e);
        reject(e);
    }

});
}

这是其他人在较新的 Firefox 中遇到的问题，还是我遗漏了一些应该很明显的问题？

【问题讨论】：

标签： javascript svg canvas png image-conversion

【解决方案1】：

正如@HelderSepu 所说，我的代码没有任何问题。 Firefox 的问题是我的 SVG 元素上没有设置高度/宽度。

我在@Kaiido 的回答here 中找到了解决方案

所以，我在使用XMLSerializer之前设置了height和width属性：

sourceSVG.setAttribute('width', 500);
sourceSVG.setAttribute('height', 500);

【讨论】：

【解决方案2】：

它对我来说很好用（我确实简化了你的代码以更好地适应 sn-p）：

var svgString = '<svg id="test" width="200px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <g xmlns="http://www.w3.org/2000/svg">    <rect fill="#67b7dc" transform="translate(-0.5,-0.5)" width="300" height="50" />    <text fill="#fff"  font-size="25" dy="20"> <tspan> Some text</tspan> </text>  </g></svg>'


let canvas = document.getElementById('compass-canvas');
canvas.width = 200
canvas.height = 50

let ctx = canvas.getContext('2d');
let img = document.createElement('img');
let svg = new Blob([svgString], {
  type: 'image/svg+xml;charset=utf-8'
});
let DOMURL = self.URL || self.webkitURL || self;
let url = DOMURL.createObjectURL(svg);

img.onload = (function() {
  ctx.drawImage(img, 0, 0);  
});

img.src = url;

&lt;canvas id='compass-canvas'&gt;&lt;/canvas&gt;

与您的代码的唯一区别是我确实对 SVG 图像进行了硬编码以进行测试...
仔细检查您在该 sourceSVG 中的内容，以确保是有效的 SVG

【讨论】：