将Raphael JS在canvas中生成的SVG另存为png的问题
我正在尝试转换由Raphael JS （和用户，因为您可以拖动和旋转图像）生成的SVG。 我在浏览器中跟踪了这个转换SVG图像（JPEG，PNG等），但仍然无法获得它。
它一定很容易，但我不能指责我错了。
我把我的svg放在一个div中， #ec为id ，canvas的是#canvas 。
function saveDaPicture(){ var img = document.getElementById('canvas').toDataURL("image/png"); $('body').append('
'); } $('#save').click(function(){ var svg = $('#ec').html(); alert(svg); canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true}); });
警报给了我：
Created with Raphael
这是svg的xml，如果我相信canvg文档 ，那就好了。
无论如何，使用此代码，变量img （应该具有转换后的图像数据）获得具有svg维度的空png的数据。
我猜的唯一一件事就是Raphael JS生成的svg没有很好地形成canvg（比如，如果我按照W3C的推荐 ， image href应该是xlink:href ）
有人对这个问题有所了解吗？ ：d
canvg接受SVG数据文件路径或单行字符串
但是在你的代码中，你正在传递div #ec的html内容
canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
jQuery的$.html()和DOM的innerHTML方法都按原样返回元素的HTML内容，因此很可能是多行。
canvg将这个多行html内容解释为文件路径，
并尝试从格式错误的url中获取数据。
因此，SVG to Canvas转换过程失败，这就是您没有按预期获得图像的原因。
这是一个应该有效的更新版本，
function saveDaPicture(){ var img = document.getElementById('canvas').toDataURL("image/png"); $('body').append(''); } $('#save').click(function(){ var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+
svgfix.js将解决此错误。 看一下这篇博客文章Export Raphael Graphic to Image
我使用SVG – 编辑和生成SVG图像，我们所做的是在服务器上安装ImageMagic （您可能已经安装了它）。
安装完成后，您只需要在终端中执行“convert foo.svg foo.png”等命令。 如果您使用的是php，那么您可以：
shell_exec("convert image.svg image.png");
在PHP中它完成了。