D3.js 中实现svg 保存 png
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]//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");
[*] }
使用方法： view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]$('#imgSave').click(function(){
[*] var url=<span style="color:#FF0000;">svgToPng(svg,width,height);</span>
[*] var pngName="svgtoPng图";
[*] var a = document.createElement("a");
[*] a.download = pngName+".png";
[*] a.href = url;
[*] a.click();
[*] })
参数介绍：svg 是D3 创建的，代码如下：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]var svg = d3.select("#jftp").append("svg")
[*] .attr("width", width)
[*] .attr("height",height);
width，height 根据需求设置 view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]var width = $(document).width()-20;
[*]var height = $(document).height()-108;
问题总结：http://img.blog.csdn.net/20161212105315626?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHgxMjM2OTg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
下载后 图片这种情况：原因是
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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);
页:
[1]