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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>