将D3 svg保存为高质量图像

有没有办法将D3 SVG图像保存为高质量图像？ 如果是，请解释……截至目前我正在使用以下代码将svg保存为图像，但我得到的图像质量不高 –

var canvas1 = document.createElement('canvas'); canvas1.id = "canvas1"; canvas1.width = w+50; canvas1.height = h+50; document.getElementById('pngcon').appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(chartId).querySelector('svg')); var imgsrc = 'data:image/svg+xml;base64,'+ btoa(html); var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); var canvasdata; var image = new Image; image.src = imgsrc; image.onload = function() { context.drawImage(image, 0, 0); canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.id="imagepng" a.download = chartname+".png"; a.href = canvasdata; document.body.appendChild(a); document.getElementById("imagepng").click(); 

Answer 1

只需更改canvas的width / height获得更大的输出图像。

此外，您可能需要更改context.drawImage(image, 0, 0); to context.drawImage(image, 0, 0, canvas.width, canvas.height);)

 var w = 100, h = 100; var canvas1 = document.createElement('canvas'); canvas1.id = "canvas1"; canvas1.width = w * 50; canvas1.height = h * 50; document.getElementById('pngcon').appendChild(canvas1); var html = new XMLSerializer().serializeToString(document.getElementById(`chartId`).querySelector('svg')); var imgsrc = 'data:image/svg+xml;base64,' + btoa(html); var canvas = document.getElementById("canvas1"); var context = canvas.getContext("2d"); var canvasdata; var image = new Image; image.src = imgsrc; image.onload = function() { context.drawImage(image, 0, 0, canvas.width, canvas.height); canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.id = "imagepng" a.innerHTML = "output file, right click - save as since click() won't work in snippet"; a.download = "output.png"; a.href = canvasdata; document.body.insertBefore(a, document.getElementById(`chartId`)); }