Jpeg load error

[qertis]

Issue or Feature

ctx.drawImage(img, 0, 0, img.width, img.height);
        ^

Error: Image given has not completed loading
    at Error (native)
    at C:\Users\iavto\WebstormProjects\CanvasLevels\index.js:22:9
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)

Steps to Reproduce

const Canvas = require('canvas');
const fs = require('fs')
var p = __dirname + '\\images\\noplan.jpg';
fs.readFile(p, function(err, data) {
    if (err) throw err;
    var img = new Canvas.Image;
    img.src = data;
    var canvas = new Canvas(img.width, img.height);
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);
})

Your Environment

• Version of node-canvas (e.g. 1.4.0): 1.6.6
• Environment (e.g. node 4.2.0 on Mac OS X 10.8): Windows 10

[qertis]

When I load *.png file all works.

[LinusU]

Can you attach an onerror handler to the image, and log any potential error?

img.onerror = (err) => console.error(err.stack)

[zbjornson]

I think this is the same as #1001, and I just posted a solution there: The error doesn't happen (for me at least) if you wait for the img.onload event.

It's odd that it only happens for jpeg; it suggests there's something async but I'm not seeing it. Plus, apparently the onerror and onload listeners must be registered before the img.src = ... line, which also suggests that it's sync.

(Aside: that the order matters is sort of unusual for node.js. Usually events are triggered after a process.nextTick so that you can register them after the img.src = ..., but this is also a bit of an unusual scenario.)

Ignore that -- I was mistaken.

[cvalente56]

I was having the same issue, and spent the last couple of days trying find out why.

For me the issue was due the this change to the /util/has_lib script.

I’m running my application from within a custom docker container with all of the native decencies compiled to /my-libs (in which node-canvas v1.6.9 runs just fine)

The new javascript based script fails the hasLdconfig() call and then fails to manually find the presence of libjpeg.so in the "common library locations”

ldconfig would have found the dependency just fine.

root@b775ecf2e41d:/my-libs/lib/pkgconfig# ldconfig -p 2>/dev/null | grep -E "jpeg" libjpeg.so.9 (libc6,x86-64) => /my-libs/lib/libjpeg.so.9 libjpeg.so (libc6,x86-64) => /my-libs/lib/libjpeg.so

So, a simple fix for me (in the meantime) was to just add the following symbolic links.

ln -s /my-libs/lib/libjpeg.so /usr/lib/libjpeg.so ln -s /my-libs/lib/libgif.so /usr/lib/libgif.so

[zbjornson]

@qertis does this error still happen if you wait for the onload event?

const Canvas = require('canvas');
const fs = require('fs')
var p = __dirname + '\\images\\noplan.jpg';
fs.readFile(p, function(err, data) {
    if (err) throw err;
    var img = new Canvas.Image;
    img.onload = () => {
        var canvas = new Canvas(img.width, img.height);
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, img.width, img.height);
    };
    img.onerror = console.log;
    img.src = data;
})

[zbjornson]

Closing since there's not enough info to do anything, and was possibly needing to wait for onload.