在 Firefox 中的画布上下文对象上使用 svg 调用 drawImage() 时出现问题

Posted 2023-03-05

【中文标题】在 Firefox 中的画布上下文对象上使用 svg 调用 drawImage() 时出现问题

【英文标题】：Problems calling drawImage() with svg on a canvas context object in Firefox

【发布时间】：2014-06-24 06:15:05

【问题描述】：

我基本上想将我的 SVG 转换为 PNG 图像。因此，我将 SVG 转换为 SVG 图像并尝试在画布上绘制它，以便能够通过 toDataURL() 方法将其作为 PNG 获取。这在 Chrome 中可以正常工作，但在 Firefox 中会产生一个非常无意义的错误：NS_ERROR_NOT_AVAILABLE

在搜索和试验了一下之后，我尝试了一个不同的 SVG 源，突然一切都正常了。有什么想法可能导致该方法对第一个 SVG 字符串正常工作但对第二个字符串失败？如何更改我的 SVG 以使其正常工作？

小提琴：http://jsfiddle.net/3AXwb/

var image = new Image();
image.src = 'data:image/svg+xml,' + escape(xml);
image.onload = function () 
    var canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext('2d');
    document.getElementById('container').appendChild(canvas);
    context.drawImage(image, 0, 0);

【参考方案1】：

为外部<svg> 元素添加宽度属性。例如。宽度=“450”

第一种情况有宽度和高度，第二种只有高度，Firefox 目前需要同时存在宽度和高度。

【讨论】：

没有怪异的方式... :D 非常感谢！我搜索了几个小时，最后它是一个愚蠢的宽度属性......你为我节省了更多宝贵的时间，伙计。抱歉，我还不能投票...