怎么利用JS将已经svg转化为图片格式（jpg、png等），并且保存到本地

如何利用JS将已经svg转化为图片格式（jpg、png等），并且保存到本地

本帖最后由 qq_23581425 于 2015-09-28 16:11:16 编辑

这是已经完成一部分的代码了，求大神补充，谢谢了，在线等！

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="canvg.js"></script>
</head>
<body>
<h2>Input Div:</h2>
<div id="mydiv">
<ul>
<li style="width:33%;float:left;height:165px;padding:0px;margin:1px;display:inline;background: #3C3C3C;"></li>
</ul>
</div>
<h2>Output Image:</h2>

<script>
var divContent = document.getElementById("mydiv").innerHTML;
var data = "data:image/svg+xml," +
"<svg xmlns='http://www.w3.org/2000/svg' width='400' height='600'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" +
divContent +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;

document.getElementsByTagName('body')[0].appendChild(img);
</script>
</body>
</html>
------解决思路----------------------
https://github.com/gabelerner/canvg
https://github.com/exupero/saveSvgAsPng
调用很简单，仔细看看readme。
------解决思路----------------------
http://stackoverflow.com/questions/18312271/javascript-how-to-save-html-rendered-on-webpage-as-image
http://stackoverflow.com/questions/16873682/save-html-div-as-an-image-with-save-as-pop-up
http://stackoverflow.com/questions/9075792/save-export-image-file-from-html-content

怎么利用JS将已经svg转化为图片格式（jpg、png等），并且保存到本地

相关推荐