How to avoid black or blank images when downloading SVG to PNG via Canvas?

user_2639697 0
Viewed 1147

I'm trying to download a SVG image to PNG, using Canvas.

The process I'm using as follows:

  1. Get the SVG HTML;
  2. Convert the SVG to Canvas;
  3. Download the Canvas as PNG.

Here's my code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = document.getElementById("mySvg");
var elementWidth = data.clientWidth || data.parentNode.clientWidth;
var elementHeight = data.clientHeight || data.parentNode.clientHeight;
var DOMURL = window.URL || window.webkitURL || window;
var aLines = document.createElement("a");
var img = new Image();
var svg = new Blob([data.outerHTML], {
  type: 'image/svg+xml'
});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
  ctx.drawImage(img, 0, 0);
  DOMURL.revokeObjectURL(url);
}

img.src = url;

aLines.href = canvas.toDataURL();
aLines.download = "test.png";

aLines.click();
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas -->

<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">
      <em>I</em> like
      <span style="color:white; text-shadow:0 0 2px blue;">
             cheese</span>
    </div>
  </foreignObject>
</svg>

When I execute that code, instead of getting the image with the contents of the SVG, I'm getting a black image.

I've tried to change the Canvas background to white, but then I get a blank image and no SVG contents.

Do you have any suggestions to fix this problem or can you point me in the right direction?

Thank you.

svg canvas html javascript
1 Answers

I was having the same issue and my code was similar to yours. However, when I modified to the following, it worked for me:

const saveSvgAsPng = (svgElt, imageName) => {
    const xml = new XMLSerializer().serializeToString(svgElt);
    const svg64 = btoa(xml);
    const b64Start = 'data:image/svg+xml;base64,';
    const { width, height } = svgElt.getBoundingClientRect();

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = 'white'; // background color for the canvas
    ctx.fillRect(0, 0, width, height); // fill the color on the canvas

    const image = new Image();
    image.onload = () => {
        ctx.drawImage(image, 0, 0, width, height);

        downloadImage(canvas, imageName); // download the image when the image has been loaded onto the canvas
    };
    image.src = b64Start + svg64;
};

const downloadImage = (canvas, imageName) => {
    canvas.toBlob((blob) => {
        const anchor = document.createElement('a');
        anchor.download = imageName;
        anchor.href = URL.createObjectURL(blob);

        anchor.click(); 

        URL.revokeObjectURL(anchor.href); // remove it from memory and save on memory!
    }, 'image/png');
};

You can pass your SVG element data to the function along with the image name. In my case, I have created a new canvas, but the function would still work if you modify the function to use your existing canvas.

Reference: https://www.digitalocean.com/community/tutorials/js-canvas-toblob

user_100459430
Related