在客户端将Svg转换为Png

时间:2013-10-11 04:04:18

标签: javascript html5 image svg

我正在开发一个基于Web的应用程序,用户可以在Svg中创建设计。我想将svg设计转换为客户端的png图像文件。我找到了使用canvas的解决方案,这在firefox中运行良好,但在chrome中它会产生安全性错误。

检查以下代码,谢谢: -

 var mainsvg=document.getElementById('svgforImg');                           
 var canvas=document.getElementById('canvas');                       
 var ctx = canvas.getContext("2d");
                        var data=mainsvg.innerHTML;
                        var DOMURL = self.URL || self.webkitURL || self;
                        var svg = new Blob([data], {
                                type: "image/svg+xml;charset=utf-8"
                        });
                        var url = DOMURL.createObjectURL(svg);
                        var img = new Image();
 img.onload = function() {
                               ctx.drawImage(img, 0, 0);
                                DOMURL.revokeObjectURL(url);                                  
                                var imageurl = canvas.toDataURL("image/png");
}

现在我的变量imageurl包含'base64 png'图像。这适用于Firefox。但在铬线

var imageurl = canvas.toDataURL("image/png");

生成安全错误。

任何帮助都将受到高度赞赏。

1 个答案:

答案 0 :(得分:0)

我认为这与this question有关。 SVG从哪台服务器发起?如果它与您的应用程序来源不同(请记住:子域很重要!),您可以在原始服务器中添加所需的http-header。