D3.js 中實現svg 儲存 png
阿新 • • 發佈:2019-02-19
直接上程式碼:
使用方法://svg 儲存成Png fuction function svgToPng(svg,pngWidth,pngHeight){ var serializer = new XMLSerializer(); var source = '<?xml version="1.0" standalone="no"?>\r\n'+serializer.serializeToString(svg.node()); var image = new Image; image.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source); var canvas = document.createElement("canvas"); canvas.width = pngWidth; canvas.height = pngHeight; var context = canvas.getContext("2d"); context.fillStyle = '#fff';//設定儲存後的PNG 是白色的 context.fillRect(0,0,10000,10000); context.drawImage(image, 0, 0); return canvas.toDataURL("image/png"); }
$('#imgSave').click(function(){ var url=svgToPng(svg,width,height); var pngName="svgtoPng圖"; var a = document.createElement("a"); a.download = pngName+".png"; a.href = url; a.click(); })
引數介紹:
svg 是D3 建立的,程式碼如下:
var svg = d3.select("#jftp").append("svg")
.attr("width", width)
.attr("height",height);
width,height 根據需求設定
var width = $(document).width()-20;
var height = $(document).height()-108;
問題總結:
下載後 圖片這種情況:原因是
linkEnter.append("path") // .attr("class", "link")// 使用了css 控制了連線格式 而 這種控制 在匯出圖片時,不能控制樣式 //setting the styles through CSS. This doesn't generally work well with rendering to PNG; .attr("style", "fill: none; stroke-opacity: 1;stroke-width: 1.5px;")//正確方法應該是 直接css在程式碼中控制。 .attr("d", function(d) { var o = {x: data.x0, y: data.y0}; return diagonal({source: o, target: o}); }) .transition() .duration(500) .attr("d", diagonal);