javascript - 更新 firefox 55 后，内联图像 (img) 未通过 SVG 在 HTML CANVAS 中呈现

Question

我开发了一个 CANVAS 区域，其中很少有 HTML 元素呈现为 SVG 数据。它在 firefox 新更新版本之前运行完美。现在，在最近的更新之后，只有 CSS 背景图像被渲染。通过 img 标签的内联图像不显示任何内容。

由于某些限制，我不能使用 css 背景图像。我必须通过更高的 z-index 和 position:absolute 属性在上层显示背景颜色和一些 PNG 图像。因此，它会感觉像在透明区域中绘制颜色。

已更新 - 示例代码 -



<pre><code> <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;background-color:#0f0'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='150' height='150'/></div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0, 200,200);
DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
</code></pre>



Answer 1

已确认是 Firefox 版本 >= 55 < 58 的错误。
https://bugzilla.mozilla.org/show_bug.cgi?id=1409992

它现在已在当前的 Nightly build 58 中修复。

不幸的是，没有已知的解决方法..