Automattic / Automattic/node-canvas
loadImage with SVG data URL not working
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 1.2k
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 1
Description
## 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
```js
var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
var svgCode = ``;
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
* canvas@2.11.2
* node 22.8.0
* Ubuntu 20.04.6 LTS
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.