canvas导出到PNG在firefox上返回空白

时间:2017-09-19 11:24:51

标签: javascript html5 canvas svg

我在onClick Eventhandler中使用了JS代码,它将内联SVG绘制到Canvas,然后导出为PNG:

 var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var data = (new XMLSerializer()).serializeToString(svg);
            var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
            var DOMURL = window.URL || window.webkitURL || window;

            var img = new Image();

            var url = DOMURL.createObjectURL(svgBlob);

            img.onload = function () {
                ctx.canvas.width = size;
                ctx.canvas.height = size;
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);

                var imgURI = canvas
                    .toDataURL('image/png')
                    .replace('image/png', 'image/octet-stream');

                triggerDownload(imgURI, 'icon_'+icon+'.'+fileType.toLowerCase());
            };

            img.src = url;

这适用于Chrome,但在Firefox中返回空白。我在SO上发现的一个常见错误是我需要在img上的onLoad事件中运行代码,但这似乎没有帮助。在此先感谢您的帮助!

0 个答案:

没有答案