Automattic/node-canvas

`Image#src=` does not work with object URL (`onload` never called, cannot be drawn on 2d context)

Open

#2,525 创建于 2025年7月16日

在 GitHub 查看
 (2 评论) (1 反应) (0 负责人)JavaScript (9,524 star) (1,140 fork)batch import
Good first issue

描述

import { Image } from 'canvas';
import { readFileSync } from 'fs';

const file = readFileSync('test.png');
const objectUrl = URL.createObjectURL(new Blob([file], { type: 'image/png' }));
const image = new Image();
image.onload = () => {
	URL.revokeObjectURL(objectUrl);
	console.log('in onload: complete =', image.complete); // never called
};
image.src = objectUrl;
console.log('immediately after setting src: complete =', image.complete); // true

If you try to draw an image with src being an object URL on a 2d context, you get Error: Image given has not completed loading.

Environment:

  • Node.js 22.14.0
  • canvas 3.1.2

贡献者指南

技术栈
javascriptnodejs
领域
backendapi
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Basic JavaScriptCanvas APINode.js
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60
研究方向
Investigate the Image class implementation in node canvas. The issue demonstrates that setting `src` to an object URL does not trigger `onload` and sets `complete=true` immediately. Look at the source files where `Image.src` is handled, likely in `lib/image.js` or the native binding in `src/Image.cc`. Check if there is any existing handling for blob: or object URLs. The fix may involve detecting object URLs and loading the image data asynchronously. Also examine the Cairo based image loading functions to understand how images are actually loaded.