Save D3 svg as a high quality image

Question

is there any way to save a D3 SVG image as a high quality image? If yes please explain... As of now i am using following code to save svg as image,but images i am getting are not high quality-

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

Kaiido · Accepted Answer

Simply changing the width/height of your canvas should give your a bigger output image.

Furthermore, you'll probably need to change 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`));
}

Side note, if you only need to download the image, you don't need to actually append the canvas to the document, you can leave it in browser's cache.

Save D3 svg as a high quality image

Answers (1)

Related Questions