javascript - 将 D3 Svg 图表(即页面中的 5 个图表)导出到单个图像中

Question

您好，我需要将单个页面中的 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();
    }}

我的Svg示例代码(假设使用相同的代码五次在单页中创建五个图形)

<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>

我使用相同的代码 5 次(即 svg.length=5)，我将这些代码放入我的页面中。就像一个接着另一个一样。上面的代码编写的是下载所有图像，但它们是作为具有通用名称的单个图像下载的。我需要单个文件中的所有五个图像(.jpeg、.png)

我们是否有可能在客户端执行此操作？

Answer 1

创建一个 Canvas 并使用 drawImage 方法中的位置参数在适当的位置绘制 svg 图像。然后，下载 Canvas 就可以完成这项工作。

例如:

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

工作中Fiddle