D3導出png，保存到本地

時間 2019-11-22

標籤 d3 導出 png 保存本地欄目圖片處理简体版

原文原文鏈接

//依賴 IE9及如下不支持html

Blob.jsnode

canvas-toBlob.jsjquery

FileSaver.jschrome

<!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>canvas

<a class="download" download>
下載
</a>
<script>app

var height=400;
var width=400;svg

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

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;
    });url

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

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.onload=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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。