Question

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

我着眼于这里给出的答案：draw svg to canvas with 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")
}

将SVG绘制到画布上以png格式下载

1 个答案: