更新firefox 55内联图像（img）不是通过SVG在HTML CANVAS中呈现 [英] After updating firefox 55 Inline images (img) is not rendering in HTML CANVAS through SVG

问题描述

我开发了一个 CANVAS 区域，其中很少的HTML元素正在呈现为 SVG数据。它在 firefox 新的更新版本之前工作完美。现在，在最近更新之后，只有CSS背景图像正在渲染。通过img标签的内联图像是什么都没有显示。

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

$ b 更新 - 示例代码 -

 < canvas id =canvasstyle =border：2px solid black; width =200height =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>< span style ='color：white; text-shadow：0 0 2px blue;'>芝士< / span> + 
< img src ='data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8 / w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='width ='150'height ='150'/>< / div> + 
< / foreignObject> + 
< / svg>; 
 var DOMURL = self.URL || self.webkitURL ||自; 
 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> 
  

解决方案

确认是Firefox版本中的一个错误> = 55< 58.

https://bugzilla.mozilla.org/show_bug .cgi？id = 1409992

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

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

I have developed a CANVAS area in which few HTML elements are rendering as SVG data. It was working perfect before firefox new updated version. Now, after this recent update only CSS background images are rendering. Inline images through img tag is showing nothing.

I can't use css background images because, of some limitations. I have to show colors in background and some PNG images on upper layer through higher z-index and position:absolute properties. So, that it will feel like color drawing in transparent area.

Updated - Sample 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>

解决方案

It is confirmed to be a bug in Firefox versions >= 55 < 58.
https://bugzilla.mozilla.org/show_bug.cgi?id=1409992

It is now fixed in current Nightly build 58.

No known workaround unfortunatetly..

这篇关于更新firefox 55内联图像（img）不是通过SVG在HTML CANVAS中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！