将SVG绘制到画布以下载为png

Question

我编写了一个将SVG绘制到隐藏画布的函数。 然后我使用'toDataURL'函数来获取'pngHref'以便稍后下载画布作为png。

我根据这里给出的答案： 使用canvg将svg绘制到画布上

svgToCanvas(){
        var svg = d3.select("svg")._groups[0][0]
        var img = new Image()
        var serializer = new XMLSerializer()
        var svgStr = serializer.serializeToString(svg)

        img.src = 'data:image/svg+xml;base64,'+window.btoa(svgStr)       

        var canvas = document.getElementById('canvas-id')
        canvas.style.visibility = 'hidden' 
        canvas.width = this.width
        canvas.height = this.height

        canvas.getContext("2d").drawImage(img,0,0,this.width,this.height)

        this.options.pngHref = canvas.toDataURL('image/png')
      }

当我第一次调用该函数时它不起作用。 第二次及以后它的工作原理。 在转换（如缩放）后，它首先不起作用，但从第二次调用开始。

Answer 1

不解决代码中可能存在的具体问题，但我发现了一个解决我的一般问题的库（将svg下载为png）库： saveSvgAsPng

该方法现在看起来像这样：

import * as downloadAsPng from 'save-svg-as-png'
...
downloadPng(){
  var svg = d3.select("svg")._groups[0][0]
  downloadAsPng.saveSvgAsPng(svg, "download.png")
}