[英]Export D3 Svg charts(i.e 5 charts in a Page) into single Image
Hi I need to export D3 graph in a single page into single image My Export Code: 嗨,我需要在单个页面中将D3图形导出到单个图像中我的导出代码:
if(itype=="image/png"){
for(i=0;i<svg.length;i++){
svgData[i] = (new XMLSerializer()).serializeToString(svg[i]);
canvas[i] = document.createElement("canvas");
svgSize[i] = svg[i].getBoundingClientRect();
canvas[i].width = svgSize[i].width;
canvas[i].height = svgSize[i].height;
ctx = canvas[i].getContext("2d");
img[i] = document.createElement("img");
img[i].setAttribute("src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData[i]))) );
ctx.drawImage(img[i], 0, 0);
ctx.save();
var imgsrc = canvas[i].toDataURL("image/png");
var a = document.createElement("a");
a.download = ImageName+".png";
a.href = imgsrc;
a.click();
}}
My Svg Sample Code(Assume same code used for five times to create five graph in SIngle Page) 我的Svg示例代码(假设使用相同的代码五次以在SIngle页面中创建五个图形)
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 800" xml:space="preserve" height="500" width="500">
<g id="layer1" transform="translate(-3.6028037,-330.49911)">
<g id="g3691">
<path id="path1160" fill="#FFFFFF" stroke="#000000" stroke-width="17.9963" stroke-linecap="round" stroke-linejoin="round" d="
M24.5,518.1c27.3-62.2,84.5-97.3,127.7-78.3c43.2,19,56.1,84.8,28.8,147c-27.3,62.2-35.6,91.9-117.7,58.7
C19.6,627.8-2.8,580.3,24.5,518.1S-2.8,580.3,24.5,518.1z" />
<path id="path1162" fill="#FFFFFF" stroke="#000000" stroke-width="18" stroke-linecap="round" stroke-linejoin="round" d="
M736.6,520.7c-27.3-62.2-84.5-97.3-127.7-78.3c-43.2,19-56.1,84.8-28.8,147s35.6,91.9,117.7,58.7
C741.5,630.4,763.9,582.9,736.6,520.7L736.6,520.7z" />
<path id="path1159" fill="#FFFFFF" stroke="#000000" stroke-width="3.5115" stroke-linecap="round" stroke-linejoin="round" d="
M641.7,645.4c0,390.6-532.8,390.6-532.8,0S641.7,254.8,641.7,645.4z" />
<path id="path3026" fill="#FFFFFF" stroke="#000000" stroke-width="8.9982" d="M375.4,513.3
c-6.5,0-84.5-26.3-124.4-16.8c-71.2,16.8-102.3,69.9-84.2,169.7c8.7,48,33.7,79,33.7,79s-55.7,19.6-47.9,97.2
c10.4,103.6,121,147.3,238.3,146.4c98.6-0.8,211-47.9,212.4-141.2c1.1-83.1-24.6-86.8-46.6-103.6c5.2-6.5,16.7-41.7,31.1-93.3
c22-79-15.5-142.5-107.5-155.4C443.3,489.9,383.1,513.3,375.4,513.3z" />
<path id="path3027" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
M299.4,556.7c27.3-1.1,30.3,75.3,3,76.4l0,0C275.1,634.1,272.1,557.8,299.4,556.7z" />
<path id="path3028" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
M450.2,633c-27.3,1.2-30.6-75.2-3.3-76.4l0,0C474.2,555.5,477.5,631.9,450.2,633z" />
<path id="path3029" fill="none" stroke="#000000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="
M420.4,694.6c0,32-92.5,32-92.5,0l0,0C327.9,662.6,420.4,662.6,420.4,694.6z" />
<path id="path3030" fill="none" stroke="#000000" stroke-width="31.4936" stroke-linecap="round" d="
M214.7,826.6c63.5,86.8,242.2,111.4,330.3,2.6" />
</g>
</g>
</svg>
I am using same code 5 times(ie svg.length=5), i am placing those code into my page . 我正在使用相同的代码5次(即svg.length = 5),将这些代码放入我的page中。 like one followed by another.
像一个接一个。 Above code have written is downloading all the images but they are downloading as single single images with common name.
上面的代码写的是下载所有图像,但它们以具有共同名称的单个图像下载。 i need all the five images in single file (.jpeg,.png)
我需要在单个文件(.jpeg,.png)中所有五个图像
Is there any Possibility we can do this do it in client Side.? 我们可以在客户端进行此操作吗?
Create a single canvas and draw the svg images at place using the position params in drawImage
method. 创建一个画布,并使用
drawImage
方法中的position params在位置绘制svg图像。 Then, downloading the canvas will do the job. 然后,下载画布即可完成工作。
For eg: 例如:
if(itype=="image/png"){
var c = document.createElement("canvas");
c.setAttribute("height",totalHeight);
c.setAttribute("width",totalWidth);
ctx = c.getContext("2d");
var marginX = 10, marginY = 10;
for(i=0;i<svgs.length;i++){
var xml = new XMLSerializer().serializeToString(svgs[i]);
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
var svgSize = svgs[i].getBoundingClientRect();
var img= document.createElement("img");
img.setAttribute("src", image64);
ctx.drawImage(img, marginX, marginY);
ctx.save();
marginX += svgSize.width + 20;
};
var imgsrc = c.toDataURL("image/png");
var a = document.createElement("a");
a.download = "Sample.png";
a.href = imgsrc;
a.click();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.