Firefox错误使用drawImage将SVG图像渲染到HTML5画布 [英] Firefox error rendering an SVG image to HTML5 canvas with drawImage
问题描述
我正在尝试使用画布将外部svg图标转换为base64 png。它适用于除Firefox之外的所有浏览器,它会抛出错误NS_ERROR_NOT_AVAILABLE。
I am trying to convert an external svg icon to a base64 png using a canvas. It is working in all browsers except Firefox, which throws an error "NS_ERROR_NOT_AVAILABLE".
var img = new Image();
img.src = "icon.svg";
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL;
};
有人可以帮我吗?在此先感谢。
Can anyone help me on this please? Thanks in advance.
推荐答案
Firefox不支持将SVG图像绘制到画布,除非svg文件在根上有宽度/高度属性< svg>
元素和那些宽度/高度属性不是百分比。这是一个长期存在的错误。
Firefox does not support drawing SVG images to canvas unless the svg file has width/height attributes on the root <svg>
element and those width/height attributes are not percentages. This is a longstanding bug.
您需要编辑icon.svg文件,使其符合上述条件。
You will need to edit the icon.svg file so it meets the above criteria.
这篇关于Firefox错误使用drawImage将SVG图像渲染到HTML5画布的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!