Нарисуйте SVG на холст, чтобы скачать как PNG

Question

Я написал функцию, которая рисует мой SVG на скрытом холсте. Затем я использую функцию «toDataURL», чтобы получить «pngHref» для загрузки холста в виде png позже.

Я ориентировался на ответ, данный здесь: рисовать SVG на холсте с помощью canvg

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