CODEWITHSUNDEEP
javascripthtmlsvgcanvassafari
Ivan Bacher
Ivan Bacher

Reputation: 6144

When converting an svg to png in the browser using canvas api, embedded image in svg is randomly blank in Safari

I am using the code below to create a png from a valid svg string. The svg has an embedded image within it.

<image xlink:href="data:image/png;base64,..." x="0" y="0" width="362" height="234"/>

This works fine in chrome and firefox, but I get this weird behaviour in safari and safari mobile. The embedded image is blank sometimes. The layout still respects the dimensions of the image, but it renders as blank. The rest of the svg still renders fine.

enter image description here

let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')

canvas.width = width 
canvas.height = height

ctx.fillStyle = 'white'
ctx.fillRect(0, 0, width, height)

let img = new Image()

img.onload = function () {
    ctx.drawImage(img, 0, 0, width, height, padding, 0, width, height)

    canvas.toBlob((blob) => {
      saveAs(blob, 'image.png')
    })
}

img.src = URL.createObjectURL(new Blob([rawSvgString], { type: 'image/svg+xml' }))

Upvotes: 1

Views: 1679

Answers (1)

Kaiido
Kaiido

Reputation: 136598

This is a known and old bug.

For a workaround, it seems that a simple setTimeout(draw, 100) is enough, though that seems quite fragile to be honest (for instance 0 was working with my image but not with the font example in the bug report).

const ctx = document.querySelector("canvas").getContext("2d");
(async () => {
  const png_blob = await fetch("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png").then(r=>r.ok&&r.blob());
  const png_dataURL = await readAsDataURL(png_blob);
  const anti_cache = "#" + Math.random();
  const svg_markup = `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 100 100">
    <rect width="10" height="10" fill="purple"/>
    <image href="${ png_dataURL + anti_cache }" width="100" height="100"/>
  </svg>`;
  const svg_blob = new Blob([svg_markup], { type: "image/svg+xml" });
    const img = new Image();
  img.src = URL.createObjectURL(svg_blob);
  img.onload = (evt) => {
    setTimeout(
      () => ctx.drawImage(img, 0, 0),
      100
    );
  };
})().catch(console.error);

function readAsDataURL(blob) {
    const reader = new FileReader();
  return new Promise((res, rej) => {
    reader.onload = () => res(reader.result);
    reader.onerror = rej;
    try {
        reader.readAsDataURL(blob);
    }
    catch(err) {
        rej(err);
    }
  });
}
<canvas></canvas>

Upvotes: 3

Related Questions