Firefox SVG2Blob没有按预期工作 [英] Firefox SVG2Blob not working as expected

问题描述

我正在处理需要转换为常规HTML画布的SVG文本路径。为此，我将SVG转换为blob文件并将其下载为图像。然而，似乎在将SVG转换为blob的情况下，Firefox会在某处断开，并且文本路径在这个过程中会完全丢失。

下面是一个小问题： http://jsfiddle.net/ne5s2r1d/

  var image = new Image（）; 
 var serializer = new XMLSerializer（）; 
 var data = serializer.serializeToString（document.getElementById（w3SVG））; 
 
 var blob = new Blob（[data]，{
 type：'image / svg + xml'
}）; 
 
 var DOMURL = window.URL || window.webkitURL ||窗口; 
 var url = DOMURL.createObjectURL（blob）; 
 
 image.onload = function（）{
 
 var canvas = document.createElement（canvas）; 
 var ctx = canvas.getContext（2d）; 
 
 canvas.width = canvas.height = 256; 
 document.body.appendChild（canvas）; 
 
 ctx.drawImage（image，20，20）; 
 
 DOMURL.revokeObjectURL（url）; 
} 
 
 image.src = url; 
 
 var canvas2 = document.createElement（canvas）; 
 var ctx2 = canvas2.getContext（2d）; 
 document.body.appendChild（canvas2）; 
  

它适用于IE10 +，Opera，Chrome，但不支持Firefox。 （目前的稳定版本）看来，Firefox完全忽略了路径元素。

关于如何解决这个问题的任何想法？我尝试过Canvg，但是它不支持文本路径，而且Kinetic似乎在Firefox中创建了渲染构件，更不用说它缺少一些关键的SVG功能。 解决方案

我知道没有很好的解决方案来实现跨浏览器的工作。然而，对于Firefox和Webkit浏览器，您可以尝试将url编码数据直接传递到图像src。

（with the头部设置为 data：image / svg + xml; charset = utf8，）

然后在画布中绘制它。

它应该保留xlink引用，但是IE会弄脏画布，所以你将无法访问它的数据。

但是，你可以让用户右键点击画布，保存图片为... 。

这是一个处理整个过程的小脚本：

 函数svgToPngDataURL（svg）{
 var svgDocType = document.implementation.createDocumentType（'svg'， -  // W3C // DTD SVG 1.1 // EN，http://www.w3.org/Graphics /SVG/1.1/DTD/svg11.dtd）; 
 var svgDoc = document.implementation.createDocument（'http://www.w3.org/2000/svg'，'svg'，svgDocType）; 
 svgDoc.replaceChild（svg.cloneNode（true），svgDoc.documentElement）; 
 var svgData =（new XMLSerializer（））。serializeToString（svgDoc）; 
 var header ='data：image / svg + xml; charset = utf8，'; 
 
 var img = new Image（）; 
 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 data = canvas.toDataURL（）; 
} 
 catch（ie）{
 document.body.appendChild（canvas）; 
 displayIEerror（）; 
 return; 
 
 doWhateverWith（data）; 
} 
 img.src = header + encodeURIComponent（svgData）; 
 
 
 
 
 
 $主要的问题是如果你必须支持IE，没有其他的方法知道，而它已经污染了画布或不试一试try {} catch（）。
因此， toDataURL（）消费，这可能是一个坏主意，尝试赶上，糟糕的垃圾收集的浏览器。
 
所以如果你有一种方法来知道你使用IE浏览器之前，避免它，如果你必须在同一页面上多次执行，添加一个标志，所以它只发生一次。
 
I'm working with SVG text paths which I need to convert to regular HTML canvas. For that I'm converting SVG to a blob file and "downloading" it as an image. However it seems that while converting SVG to blob firefox breaks somewhere and text path is lost completely in the process.

Here's a fiddle of the problem: http://jsfiddle.net/ne5s2r1d/
var image = new Image();
var serializer = new XMLSerializer();
var data = serializer.serializeToString(document.getElementById("w3SVG"));

var blob = new Blob([data], {
    type: 'image/svg+xml'
});

var DOMURL = window.URL || window.webkitURL || window;
var url = DOMURL.createObjectURL(blob);

image.onload = function () {

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    canvas.width = canvas.height = 256;
    document.body.appendChild(canvas);

    ctx.drawImage(image, 20, 20);

    DOMURL.revokeObjectURL(url);
}

image.src = url;

var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext("2d");
document.body.appendChild(canvas2);
It works with IE10+, Opera, Chrome but not firefox. (Current stable releases) It seems that firefox completely ignores the path element.

Any ideas on how to solve this? I tried Canvg but it doesn't support text paths and Kinetic seems to create rendering artifacts in firefox not to mention it's missing some of the key SVG features.
解决方案
I know no good solution for this to work cross-browser.  

However for Firefox and webkit browsers, you could try to pass directly the url encoded data to an image src.

(with the header set as data:image/svg+xml; charset=utf8 ,)

Then draw it in your canvas.  

It should keep the xlink references, but IE will taint the canvas so you won't be able to access its data.

However, you can let the user right click on the canvas and save picture as….  

Here is a little script that handles the full process :  
function svgToPngDataURL(svg){
    var svgDocType = document.implementation.createDocumentType('svg',  "-//W3C//DTD SVG 1.1//EN", "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd");
    var svgDoc = document.implementation.createDocument ('http://www.w3.org/2000/svg', 'svg', svgDocType);
    svgDoc.replaceChild(svg.cloneNode(true), svgDoc.documentElement);
    var svgData = (new XMLSerializer()).serializeToString(svgDoc);
    var header = 'data:image/svg+xml; charset=utf8 ,';

    var img = new Image();
    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);
        try{
            var data = canvas.toDataURL();
            }
        catch(ie){
            document.body.appendChild(canvas);
            displayIEerror();
            return;
            }
        doWhateverWith(data);
        }
    img.src = header+encodeURIComponent(svgData);
    }
The main problem of this is that if you have to support IE, there is no other way to know whereas it has tainted the canvas or not that a try{}catch().

Thus, toDataURL() can be really consumptive and it may be a bad idea to do it in a try catch, badly garbage collected by browsers.

So if you have a way to know that you are using IE before, avoid it and if you have to do it multiple time on the same page, add a flag so it occurs only once.

                        
这篇关于Firefox SVG2Blob没有按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！