將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")
}