Enregistrer D3 svg sous forme d’image de haute qualité

Est-il possible de sauvegarder une image D3 SVG en tant qu’image de haute qualité? Si oui, veuillez expliquer … À partir de maintenant, j’utilise le code suivant pour enregistrer svg en tant qu’image, mais les images que je reçois ne sont pas de grande qualité.

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().serializeToSsortingng(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(); 

Changer simplement la width / height de votre canvas devrait vous donner une image de sortie plus grande.

De plus, vous devrez probablement changer 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().serializeToSsortingng(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`)); }