0
274
VistasWhen 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' }))
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta