D3.js 中实现svg 保存 png

本文提供了一段将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);

 

 

 

 

 

 

 

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值