Javascript canvas.toDataUrl() 在 Firefox 中编码不正确

Question

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

在 Chrome 68 中，它工作得很好，但在 Firefox 61 中，它呈现一个空图像，其中 URL 为：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAYAAADNkKWqAAABpElEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCnAUGaAAH3lkeeAAAAAElFTkSuQmCC

我要转换和 SVG 的代码在下面找到。您可能会认识到，它几乎只是 copy/paste 来自其他 sites/questions 其他人试图完成此目标的地方。

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 中遇到的问题，还是我遗漏了一些应该很明显的问题？

Answer 1

它对我来说很好用（我确实简化了你的代码以更好地适应一个片段）：

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;

<canvas id='compass-canvas'></canvas>

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

Answer 2

正如@HelderSepu 所说，我的代码没有任何问题。 firefox 的问题是我没有在我的 SVG 元素上设置 height/width 。

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

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

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

Javascript canvas.toDataUrl() 在 Firefox 中编码不正确

Javascript canvas.toDataUrl() not encoding properly in Firefox

javascript

svg

png

canvas

image-conversion