Question

0

267

Views

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.

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' }))

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-11T05:46:49.020Z

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>

0

267

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

1 answers

0

Find remote jobs

Andres GPT