javascript 将 Raphael JS 在画布中生成的 SVG 保存为 png 时出现问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4216927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem saving as png a SVG generated by Raphael JS in a canvas
提问by Shikiryu
I'm trying to convert a SVG generated by Raphael JS(and the user, since you can drag and rotate the images). I followed this Convert SVG to image (JPEG, PNG, etc.) in the browserbut still can't get it.
我正在尝试转换由Raphael JS（和用户，因为您可以拖动和旋转图像）生成的 SVG 。我在浏览器中按照此将 SVG 转换为图像（JPEG、PNG 等）进行操作，但仍然无法获取。
It must be easy but I can't put my finger on what I get wrong.
这一定很容易，但我不能指出我做错了什么。
I got my svg in a div with #ecas idand the canvas's one is #canvas.
我把我的 svg 放在一个带有#ecas的 div 中，id而画布的一个是#canvas.
function saveDaPicture(){
var img = document.getElementById('canvas').toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
var svg = $('#ec').html();
alert(svg);
canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true});
});
The alert gives me :
警报给了我：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">
<desc>Created with Raphael</desc>
<defs></defs>
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image>
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect>
<circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle>
<image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image>
<image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image>
<image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image>
</svg>
which is the xml of the svg and if I believe canvg documentation, it's good.
这是 svg 的 xml，如果我相信canvg 文档，那就太好了。
Anyway, with this code, the variable img, which should have the converted image data, got the data of an empty png with the dimensions of the svg.
无论如何，使用此代码，img应该具有转换后的图像数据的变量获得了具有 svg 尺寸的空 png 的数据。
The only thing I guess is that the svg generated by Raphael JS is not well formated for canvg (like, hrefof imageshould be xlink:hrefif I follow the W3C recommandations)
我唯一猜想的是，Raphael JS 生成的 svg 格式不适合 canvg（例如，如果我遵循W3C 建议href，image应该是xlink:href这样）
Anyone got an idea on this problem ? :D
有人对这个问题有想法吗？:D
回答by Livingston Samuel
canvgaccepts the SVGdata a file path or a single-line string
canvg接受SVG数据文件路径或单行字符串
but in your code, your are passing the html content of the div #ecas
但是在您的代码中，您将 div 的 html 内容#ec作为
canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
Both jQuery's $.html()and DOM's innerHTMLmethods return the HTML content of an element as is, so most probably in multiple lines.
jQuery$.html()和 DOM 的innerHTML方法都按原样返回元素的 HTML 内容，因此很可能在多行中。
canvginterprets this multi-line html content as a file path,
canvg将此多行 html 内容解释为文件路径，
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">
and tries to fetch the data from the malformed url.
并尝试从格式错误的 url 中获取数据。
So the SVG to Canvas conversion process failed and that's the reason you are not getting the image as expect.
所以 SVG 到 Canvas 的转换过程失败了，这就是您没有按预期获得图像的原因。
Here is a updated version that should work,
这是一个应该可以工作的更新版本，
function saveDaPicture(){
var img = document.getElementById('canvas').toDataURL("image/png");
$('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
// strips off all spaces between tags
//alert(svg);
canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
});
回答by Ignacio Vazquez
svgfix.js will solve this errors. take a look at this blog post Export Raphael Graphic to Image
svgfix.js 将解决这个错误。看看这篇博客文章将拉斐尔图形导出到图像
回答by amosrivera
I worked with SVG - Editand generated SVG images, what we did was install ImageMagicon the server (you probably have it installed already).
我使用SVG - 编辑并生成 SVG 图像，我们所做的是在服务器上安装ImageMagic（您可能已经安装了它）。
Once installed you only need to do execute a command like "convert foo.svg foo.png" in the terminal. If you are using php then you can do:
安装后，您只需要在终端中执行诸如“convert foo.svg foo.png”之类的命令。如果您使用的是 php，那么您可以执行以下操作：
shell_exec("convert image.svg image.png");
In php and it's done.
在 php 中，它完成了。
