我正在尝试获取SVG并将其转换为image/png
数据url。
在Chrome 68中,它可以很好地工作,但在Firefox 61中,它会呈现一个带有URL的空图像:
图像数据:
/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAYAAADNkKWqAAABpElEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCnAUGaAAH3lkeeAAAAAElFTkSuQmCC
下面是我要转换和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中遇到的问题,还是我遗漏了一些应该非常明显的东西?
https://stackoverflow.com/questions/51826868
复制相似问题