D3导出png，保存到本地

最新推荐文章于 2023-08-22 11:08:08 发布

weixin_33885253

最新推荐文章于 2023-08-22 11:08:08 发布

阅读量532

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/byAge/blog/663008

版权

为什么80%的码农都做不了架构师？>>>

//依赖 IE9及以下不支持

Blob.js

canvas-toBlob.js

FileSaver.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="d3.js"></script>
<script src="Blob.js"></script>
<script src="canvas-toBlob.js"></script>
<script src="FileSaver.js"></script>
<style>
*{
padding: 0;
margin:0;
}
</style>
</head>
<body>

var height=400;
var width=400;

var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);

var data=[1,2,3,4,5,6,7,8];
svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("width",20)
    .attr("fill","red")
    .attr("x",function(e,i){
        return 25*i;
    })
    .attr("height",function(e,i){
        return e*50;
    });

$(".download").click(function(){
down()
});

var down=function(){

//首先将svg专成xml文件形式

var doctype = '<?xml version="1.0" standalone="no"?>'
+ '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';

// serialize our SVG XML to a string.
var source = (new XMLSerializer()).serializeToString(d3.select('svg').node());

// create a file blob of our SVG.
var blob = new Blob([ doctype + source], { type: 'image/svg+xml;charset=utf-8' });
var url = window.URL.createObjectURL(blob);
var downloadImg=document.createElement("img");
downloadImg.src=url;
downloadImg.οnlοad=function(){//当onload之后再画，否则导出时为空白

//2.将svg转成canvas
var canvas=document.createElement("canvas");
        canvas.width=width;
        canvas.height=height;
    var ctx=canvas.getContext('2d');
        ctx.drawImage(downloadImg,0,0);

        canvas.toBlob(function(blob) {
                saveAs(
                      blob
                    , "1.png"//保存文件名称
                );
            }, "image/png");
    }

};
</script>
</body>
</html>

转载于:https://my.oschina.net/byAge/blog/663008