Automattic / Automattic/node-canvas

loadImage with SVG data URL not working

Open
#2,428 5 comments 4 reactions 0 assignees View on GitHub
Bug
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.