Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/479.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在客户端将Svg转换为Png_Javascript_Html_Image_Svg - Fatal编程技术网

Javascript 在客户端将Svg转换为Png

Javascript 在客户端将Svg转换为Png,javascript,html,image,svg,Javascript,Html,Image,Svg,我正在开发一个基于Web的应用程序,用户可以在其中使用Svg创建设计。我想在客户端将svg设计转换为png图像文件。我找到了一个使用canvas的解决方案,它在firefox中运行良好,但在chrome中会产生安全错误 请检查以下代码,谢谢:- var mainsvg=document.getElementById('svgforImg'); var canvas=document.getElementById('canvas');

我正在开发一个基于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");
生成安全错误


任何帮助都将不胜感激

我认为这与。SVG来自哪个服务器?如果它与您的应用程序来自的不同(请记住:子域很重要!),您可以在原始服务器中添加所需的http头。

可能是重复的,因此这意味着,我必须在服务器端对chrome和Firefox进行图像转换。可能是的(除非您需要chrome的最新开发版本)。如果svg足够简单,您可能会有一些运气,例如canvg-。正如您在代码中看到的,svg位于DOM中。与创建画布的位置相同