D3.js 中实现svg 保存 png

最新推荐文章于 2025-04-17 17:41:00 发布

刘翔UP

最新推荐文章于 2025-04-17 17:41:00 发布

阅读量8.8k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/xx123698/article/details/53580057

版权

js 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一段将SVG格式的图像转换为PNG格式的JavaScript代码，并详细解释了如何使用该函数。此外，还介绍了在转换过程中直接在代码中设置样式的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码：

//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();
       })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);