[Bug] node-canvas could not load image

[itzdrli]

Version

5.4.3

Link to Minimal Reproduction

https://github.com/itzdrli/example

Steps to Reproduce

Use the code from Here. The code has written by following official document

Current Behavior

Error: C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:9083 for (var i = 0; i < cachedImgObj.pending.length; i++) { ^

TypeError: Cannot read properties of undefined (reading 'pending') at imageOnLoad (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:9083:42) at setSource (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\canvas\lib\image.js:94:13) at Image.set (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\canvas\lib\image.js:40:9) at Object.loadImage (C:\Users\xxxx\Desktop\t\index.js:16:13) at createOrUpdateImage (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:9067:37) at brushImage (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:27311:34) at brush (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:27627:17) at CanvasPainter._doPaintEl (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:40498:17) at repaint (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:40433:31) at _loop_1 (C:\Users\xxxx\Desktop\t\node_modules.pnpm\[email protected]\node_modules\echarts\dist\echarts.js:40464:21)

Expected Behavior

the image would show

Environment

- OS:Windows 11
- Node-Canvas

Any additional comments?

No response

[helgasoft]

not sure what you are trying to accomplish with loadImage since it is not used anywhere... Images could be used as background or symbols - Demo Code

[ahdg6]

not sure what you are trying to accomplish with loadImage since it is not used anywhere... Images could be used as background or symbols - [Demo Code)

Check the code he provided, he is indeed using symbols. And if the image is not loaded, this error will not appear at all

Even when using the Demo code you provided, this error still occurs in node-canvas.

[ahdg6]

wth, if you remove img.onload = onload.bind(img); it will works as intented. Possible related commit: https://github.com/ecomfe/zrender/commit/c564acd0b0619df9402790f67ae229c1e4ac8d8b

Anyway, the offical documentation are not written correctly. https://echarts.apache.org/handbook/en/how-to/cross-platform/server/#loading-of-images

[Fenixs8973]

wth, if you remove img.onload = onload.bind(img); it will works as intented. Possible related commit: ecomfe/zrender@c564acd

Anyway, the offical documentation are not written correctly. https://echarts.apache.org/handbook/en/how-to/cross-platform/server/#loading-of-images

Wow, man, thank you so much for this info! I have been trying to fix this error with the GPT, but in vain. I did as you said and everything worked! By the way, the documentation has not been corrected so far)))

[000px]

同样遇到这个错误 D:\wx\echarts_server\node_modules\canvas\lib\image.js:91 SetSource.call(img, src) ^

TypeError: Cannot read properties of undefined (reading 'pending') at Image.imageOnLoad (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:8977:42) at setSource (D:\wx\echarts_server\node_modules\canvas\lib\image.js:91:13) at Image.set (D:\wx\echarts_server\node_modules\canvas\lib\image.js:62:9) at Object.loadImage (D:\wx\echarts_server\test.js:14:17) at createOrUpdateImage (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:8961:37) at brushImage (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:25579:34) at brush (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:25895:17) at CanvasPainter._doPaintEl (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:37377:17) at repaint (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:37312:31) at _loop_1 (D:\wx\echarts_server\node_modules\echarts\dist\echarts.js:37343:21)

Node.js v22.12.0

添加了此代码 echarts.setPlatformAPI({ // 同老版本的 setCanvasCreator createCanvas() { return createCanvas(); }, loadImage(src, onload, onerror) { const img = new Image(); // 必须要绑定 this context. img.onload = onload.bind(img); img.onerror = onerror.bind(img); img.src = src; return img; } });，在option中配置了 graphic: { type: 'image', id: 'map-background', left: 'left', top: 'left', style: { image: 'ma9p.png', height: 800, // opacity: 0.7 },