search

Automattic / node-canvas

Node canvas is a Cairo backed Canvas implementation for NodeJS.
10.12k stars 1.17k forks source link

loadImage with SVG data URL not working #2428

Open aarondoet opened 2 weeks ago

aarondoet commented 2 weeks ago

Issue

I am drawing multiple images, where some are stored as data URL and some are stored as SVG code. While developing I was mainly using the browser and not the server, I only tested that later and noticed, that some images don't draw. The issue is: whereas the data:image/png;base64,... URLs are working, my SVGs are not drawn.

I have tested, when loading the SVG from a file it does work, but using a data URL does not. Using a Buffer does work, but it does require me to differentiate between rendering on the server and on the client, data URLs do work on the client only and Buffers work on the server only.

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
var svgCode = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox="0 0 24 24"><path d="M11.906 1.994a8.002 8.002 0 0 1 8.09 8.421 7.996 7.996 0 0 1-1.297 3.957.996.996 0 0 1-.133.204l-.108.129c-.178.243-.37.477-.573.699l-5.112 6.224a1 1 0 0 1-1.545 0L5.982 15.26l-.002-.002a18.146 18.146 0 0 1-.309-.38l-.133-.163a.999.999 0 0 1-.13-.202 7.995 7.995 0 0 1 6.498-12.518ZM15 9.997a3 3 0 1 1-5.999 0 3 3 0 0 1 5.999 0Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>`;
var img = await loadImage(`data:image/svg+xml,${encodeURIComponent(svgCode)}`);
ctx.drawImage(img, 0, 0);
Error: Unsupported image type
    at setSource (.../node_modules/canvas/lib/image.js:94:13)
    at Image.set (.../node_modules/canvas/lib/image.js:40:9)
    at .../node_modules/canvas/index.js:34:15

Your Environment

SKYE6IX commented 1 week ago

Were you able to solved this issue ?