我想通过JavaScript将SVG转换为位图图像(如JPEG,PNG等).
我有一个小项目,用户使用Raphael构建图表,然后将组合图表导出到图像中进行保存.
问题是它必须脱机运行.http://www.nihilogic.dk/labs/canvas2image/不会起作用,因为它需要画布,而不是Raphael生成的SVG.
有没有办法(javascript)我可以从SVG导出图像？
我正在尝试转换由Raphael JS(和用户,因为您可以拖动和旋转图像)生成的SVG .我在浏览器中跟踪了这个转换SVG图像(JPEG,PNG等),但仍然无法获得它.
它一定很容易,但我不能指责我错了.
我得到了我在一个div与SVG #ec作为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});
});
警报给了我:
<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" …我有一个在地图应用程序中使用SVG/VML(通过Raphael JS)设置的网站,其中SVG用于在背景地图图像上显示图形.这在屏幕上非常有效,并且可以使用叠加打印硬拷贝地图.但是,当用户想要将具有SVG覆盖图的地图图像保存到本地.JPG文件时,此设置会分崩离析.
更具体地说,当SVG/VML元素位于图像顶部时,使用大多数浏览器的标准右键单击功能"将图像另存为..."不起作用.在地图上单击鼠标右键,用户可以保存地图图像,但不包含叠加层.右键单击重叠的SVG元素,用户获得的最佳功能是检查元素或保存一些HTML(因浏览器而异).
所以我的主要问题是; 是否可以拍摄图像和SVG元素并将它们(最好是客户端,虽然我可以选择)组合成一个"扁平"图像,.JPG,.PNG或其他,然后可以右键单击并根据要求保存或下载到用户的PC上？