svg转图片下载

来源：互联网发布：泰山医学院网络平台编辑：程序博客网时间：2024/05/29 19:02

参考链接：
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这篇博客上修改的，可对比查看。

阅读全文

0 0