svg转图片下载
参考链接：
http://www.cnblogs.com/jiangxiaobo/p/6007589.html
http://blog.csdn.net/guoweish/article/details/53106898
http://www.w3dev.cn/article/20170506/save-canvas-to-image.aspx
http://javascript.ruanyifeng.com/htmlapi/svg.html#toc6
http://blog.csdn.net/baidu_24024601/article/details/53352079
https://social.msdn.microsoft.com/Forums/en-US/bdd5dd0a-7238-44e4-b737-2b0c8e8285a0/canvasmstoblob-unreliable-returns-incorrect-stream?forum=winappswithhtml5&forum=winappswithhtml5
https://technet.microsoft.com/ZH-CN/Library/hh779016.aspx
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob
一.效果
google：
火狐：
ie查了许多资料，仍没实现，哪位道友知道的话，还望留言告知。
二、代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>组织结构图</title>
<style>
.node circle {
cursor: pointer;
}
.node text {
font-size: 14px;
}
</style>
</head>
<body>
<div id="test">
</div>
<a id="download">下载</a>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/TreeExtend-项目中使用.js"></script>
<script type="text/javascript">
var opt = {
colors:["#25a4f6","#92d1fa","#ae43a6","#f7881f","#f7881f"],
width:1000,
height:800,
container:'#test',//树形图容器，值为选择器
data:'new_file.json'//必填，url或对象
};
var TreeExtend = new TreeExtend(opt);
TreeExtend.init();
//svg另存为图片
//兼容性IE10+
$("#download").click(function(){
//必需加的命名空间，否则img获取不了
d3.select("#test svg")
.attr("version", 1.1)
.attr("xmlns", "http://www.w3.org/2000/svg");
var svgXml = $('#test').html();
var img = new Image();
//给图片对象写入base64编码的svg流
//https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa,btoa方法说明
//image/svg+xml
img.src = 'data:image/svg+xml;base64,'+ window.btoa(unescape(encodeURIComponent(svgXml)));
img.onload = function(){
var canvas = document.createElement('canvas'), //准备空画布
width = $('#test svg').width(),
height = $('#test svg').height(),
context = canvas.getContext('2d');//取得画布的2d绘图上下文
canvas.width = width;
canvas.height = height;
//设置图片颜色，避免下载图片为透明的背景
context.fillStyle = "#fff";
context.fillOpacity = "0";
context.fillRect(0,0,width,height);
context.drawImage(img, 0, 0);
var a = document.createElement('a');
if (canvas.msToBlob) {//IE10+浏览器
//var blob = canvas.msToBlob();//ie下始终在这里报错
//window.navigator.msSaveBlob(blob, "tree.png");
}else {
//默认导出图片类型为image/png
a.href = canvas.toDataURL();
a.download = "tree.png"; //设定下载名称
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(event);
}
console.log("图片下载成功!!");
}
img.onerror = function(){
console.log("图片装载错误！");
}
});
</script>
</body>
</html>三、此代码是在我的http://blog.csdn.net/wanglei1991gao/article/details/71247207这篇博客上修改的，可对比查看。
上一篇： C语言获取程序运行时间
下一篇： CSS（基础篇）