d3画的图或者svg图转base64编码格式

来源：互联网发布：js创建html表格编辑：程序博客网时间：2024/06/05 13:26

大家一定有这样的困扰，我用的svg画的图，怎么转成base64传到后台去呢，众所周知，d3.js就是基于svg

画出来的图，所以d3.js画的图就是svg格式的图，博主在工作中也遇到了这个问题，就是拿d3.js画出来的图

需要转成base64编码传到后台去，然后在后来导出word，经过两天的摸索和网上查阅各种资料，终于被我

找到一种方法，特别方便，不过要引入一个js，就是saveSvgAsPng.js，这里给大家一个网址，大家可以

去下载，而且用法超简单，直接调用API就ok了，上传这个的哥们真是太良心啦

网址：https://github.com/exupero/saveSvgAsPng

好了废话不多说，下面开始讲如何讲d3.js（svg）转成base64的编码格式，众所周知，canvas有一个函数可

以直接转成base64的编码格式canvas.toDataURL()，对，没错，就是这个函数，所以我们要先把svg的

图片转成canvas，用canvas画出来，就可以调用canvas的API来进行转换啦，下面上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .axis path,.axis line{            fill:none;            stroke:black;            shape-rendering:crispEdges;        }        .axis text{            font-family:sans-serif;            font-size:11px;        }        .node circle {            fill: steelblue;            /*stroke: steelblue;  */          stroke-width: 1.5px;          }          .node {            font: 12px sans-serif;          }          .link {            fill: none;            stroke: #ccc;            stroke-width: 1.5px;          }    </style></head><body>    <div class="svg-wrap"></div>    <button id = "btn">保存图片</button>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js" charset = "utf-8"></script>    <script type="text/javascript" src = "js/saveSvgAsPng.js" charset = "utf-8"></script>    <script type="text/javascript">        var width = 600;        var height = 600;        var svg = d3.select(".svg-wrap")                    .append("svg")                    .style("background-color","yellow")                    .attr("width",width)                    .attr("height",height)        //转换数据        var tree = d3.layout.tree()                        .size([width,height - 200])                        .separation(function(a,b){                            return (a.parent == b.parent ? 1 : 2);                        });        //绘制        var diagonal = d3.svg.diagonal()                            .projection(function(d){                                return [d.y,d.x];                            })        d3.json("value.json",function(error,root){            var nodes = tree.nodes(root)            var links = tree.links(nodes)            console.log(nodes);            console.log(links);            var link = svg.selectAll(".link")                        .data(links)                        .enter()                        .append("path")                        .attr("class","link")                        .attr("d",diagonal)                        .attr("transform","translate(60,0)")            var node = svg.selectAll(".node")                            .data(nodes)                            .enter()                            .append("g")                            .attr("class","node")                            .attr("transform",function(d){                                return "translate(" + (d.y+60) + "," + d.x +")"                            })            node.append("circle")                .attr("r",20)                .attr("fill","steelblue")            node.append("text")                .attr("dx",function(d){                    return d.children ? 12 : -10;                })                .attr("dy",35)                .style("text-anchor",function(d){                    return d.children ? "end" :"start";                })                .text(function(d){                    return d.name;                })            /////////////////////////////////////////////            //saveSvgAsPng(document.querySelector("svg"), "diagram.png");            document.getElementById("btn").onclick = function(){                saveSvgAsPng(document.querySelector("svg"), "diagram.png");//保存成图片            }            svgAsDataUri(document.querySelector(".svg-wrap svg"), {}, function(uri) {//转换成base64编码                var img = new Image()                img.src = uri;                console.log(uri);                var canvas = document.createElement('canvas');                canvas.width = width;                canvas.height = height;                var content = canvas.getContext('2d');                img.onload = function(){                    content.drawImage(img,0,0);                    console.log(canvas.toDataURL());                }            });        })    </script></body></html>

运行结果如下：

这里写图片描述

其中点击保存图片，会调用saveSvgAsPng(document.querySelector("svg"), "diagram.png");
保存成png格式图片

这里写图片描述

而且真的是png图片哦，下面看保存效果，我拿看图王打开的

这里写图片描述

调用：

svgAsDataUri(document.querySelector(".svg-wrap svg"), {}, function(uri) {//转换成base64编码 var img = new Image() img.src = uri; console.log(uri); var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var content = canvas.getContext('2d'); img.onload = function(){ content.drawImage(img,0,0); console.log(canvas.toDataURL()); } });

就可以在控制台打印出base64的图片编码格式的了

这里写图片描述

这个是控制台打印出来的，到时候就可以把这个base64编码传到后台去就ok了，是不是特别方便呢！

阅读全文

0 0