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 文件在根 元素上具有宽度/高度属性并且那些宽度/高度属性不是百分比.这是一个长期存在的错误.

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屋！