svg转图片下载

最新推荐文章于 2024-03-12 13:30:40 发布

wl_

最新推荐文章于 2024-03-12 13:30:40 发布

阅读量3.8k

点赞数 1

分类专栏：可视化文章标签： canvas svg转canvas 下载图片导出图片导出svg

本文链接：https://blog.csdn.net/wanglei1991gao/article/details/72898480

版权

可视化专栏收录该内容

19 篇文章 3 订阅

订阅专栏

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

wl_

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
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.ruany
复制链接

扫一扫