Javascript 将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();

---

只需更改画布的

宽度

/

高度

，即可获得更大的输出图像

此外，您可能需要更改

context.drawImage（image，0，0）到
上下文.drawImage（图像，0，0，canvas.width，canvas.height）；）


var w=100，
h=100；
var canvas1=document.createElement（'canvas'）；
canvas1.id=“canvas1”；
画布1.宽度=w*50；
画布1.高度=h*50；
document.getElementById（'pngcon'）.appendChild（canvas1）；
var html=new XMLSerializer（）.serializeToString（document.getElementById（`chartId`））.querySelector（`svg'）；
var imgsrc='数据：image/svg+xml；base64'+btoa（html）；
var canvas=document.getElementById（“canvas1”）；
var context=canvas.getContext（“2d”）；
var数据；
var图像=新图像；
image.src=imgsrc；
image.onload=函数（）{
context.drawImage（图像，0，0，canvas.width，canvas.height）；
canvasdata=canvas.toDataURL（“image/png”）；
var a=document.createElement（“a”）；
a、 id=“imagepng”
a、 innerHTML=“输出文件，右键单击-另存为，因为单击（）在代码段中不起作用”；
a、 下载=“output.png”；
a、 href=拉票数据；
document.body.insertBefore（a，document.getElementById（`chartId`））；
}