首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript canvas.toDataUrl()在Firefox中编码不正确

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

Stack Overflow用户
提问于 2018-08-14 00:35:46
回答 2查看 559关注 0票数 0

我正在尝试获取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中遇到的问题,还是我遗漏了一些应该非常明显的东西?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51826868

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档