Node Canvas/Resemble.js Error: Image given has not completed loading at load

Question

I'm trying to use Resemble.js in node. I had a bit of trouble getting canvas/cairo installed (something to do with a mix of OS X Mavericks/XQuarts and Homebrew) but got there eventually.

Got pretty far, but I've hit a wall with this.

function ImageSimilarityChecker(){
    var resemble = require("resemble").resemble;
    var fs = require("fs");
    var util = require("util");

    this.admitImage = function(imagePath)
    {

        fs.readFile(imagePath, function (err, fileData) 
        {
            if (err) throw err;
            else 
            {
                var api = resemble(fileData).onComplete(function(data){
                    console.log(imagePath);
                    console.log(util.inspect(data));
                });
            }
        });

    }
}

new ImageSimilarityChecker().admitImage("./public/images/test.jpg");

Results in this error:

/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:38
      context.drawImage(hiddenImage, 0, 0, width, height);
              ^
Error: Image given has not completed loading
    at load (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:38:15)
    at module.exports.loadImageData (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/lib/server.js:11:7)
    at Object.onComplete (/Users/pcoghill/Projects/imgManip/auth/Servers/Farm/node_modules/resemble/resemble.js:508:5)
    at /Users/pcoghill/Projects/imgManip/auth/Servers/Farm/resembleFile.js:14:39
    at fs.js:271:14
    at Object.oncomplete (fs.js:107:15)

I'm pretty new to node, so I don't see how the image hasn't loaded. It's a local file and I'm handling it on the read completed callback (or so I think).

A little digging around makes me think this is an issue in canvas when reading jpg files, but I'm struggling to understand the details. I've found this question, which looks very similar, but I can't see how to convert this to my situation.

Could someone explain how I could fix this and what I'm doing wrong?

No, I've been meaning to have a look at this again as it's a side project, will try to have a look this weekend and see if I can fix it. — Paul Coghill, Nov 21 '14 at 09:43
I had problems installing Cairo on OSX Mavericks as well but finally somehow installed it. Then I got this error 'image given has not completed loading' when I tried to draw image (context.drawImage) on Canvas in Node. Image was loaded on the fly from url using Request library and this was somehow causing the error. On load event was not firing for some reason too. I ended up: loading image from url using Request, saving it on the disk, loading it from disk, drawing it on canvas. So much trouble. — youbetternot, Nov 21 '14 at 21:48

Topher Hunt · Answer 1 · 2015-03-14T12:57:14.050

Have you considered that the input images may not be valid? After some digging I'm discovering that Node Canvas gives some pretty misleading error messages, so "Image has not completed loading" could potentially point to a range of errors related to the image file. See https://github.com/Automattic/node-canvas/issues/486

I'm stuck on this issue too, so will keep digging and will post here if I find more.

EDIT: You can easily install Node and the resemble package without installing JPG support, and you won't be warned that JPGs aren't supported. Unfortunately it looks like adding JPG support is a real pain point currently; see https://github.com/Automattic/node-canvas/issues/289

EDIT 2: Just found a Node-Canvas wiki page that specifically names this problem and explains that it means the libjpeg package is missing. Install that package, then recompiling Node-Canvas. See more at https://github.com/Automattic/node-canvas/wiki/installation---osx

Node Canvas/Resemble.js Error: Image given has not completed loading at load

1 Answers1