Image given has not completed loading

[tarunkurapati]

Error: Error: Image given has not completed loading at /home/f-user/passport-facebook/examples/login/app.js:315:17 at fs.readFile (fs.js:176:14) at Object.oncomplete (fs.js:297:15)

Code:

var canvas = new Canvas(650, 650) , ctx = canvas.getContext('2d'); fs.readFile(__dirname + '/public/resimg/1.jpg', function(err, squid){ if (err) throw err; img = new Canvas.Image; img.src = squid; img.onload = function(){ console.log("ian here in onload"); ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4); } });

I have seen similar issues here, they mentioned to use "img.onload" in case we get this error "Image given has not completed loading"

But img.onload is not getting fired in my case. May i know how to fix for this issue. Thanks

[tarunkurapati]

@visionmedia Can you please look after this issue. Thanks

[galiminus]

This issue affects me too. The code from examples/pdf-images.js can be used to reproduce it.

Stracing the application show that the image is really not loaded (only 4096 bytes are read before the error message is printed). I will try to investigate it as well.

Thanks !

[galiminus]

Well, installing libjpeg62-dev on debian make it work :) The Image::loadSurface() method only returns a CAIRO_STATUS_READ_ERROR, without much more informations, if the format is not supported.

[jiguang]

still got the same message :(

/Users/jiguang/www/node/api.js:24 ctx.drawImage(img, 0, 0); ^ Error: Image given has not completed loading at IncomingMessage. (/Users/jiguang/www/node/api.js:24:13) at IncomingMessage.EventEmitter.emit (events.js:117:20) at _stream_readable.js:920:16 at process._tickCallback (node.js:415:13)

[vijayrudraraju]

I was having this problem. I installed libjpeg (used 'brew install libjpeg' on osx). And it worked!

[coagulant]

I had the same issue for Ubuntu 12.04 LTS. Solution was to remove canvas, uninstall libjpeg-dev, libjpeg62-dev; install libjpeg8-dev; install canvas again.

[itsmontoya]

I'm experiencing this issue on smartOS as well. We don't have access to as many jpeg libraries as well.. This is a bummer

[komocode]

Experiencing this too on OSX. Tried brew install libjpeg. No go for me. node-canvas V1.1.6

[finscn]

Me too . Mac OS X 10.9.

Can't load image. the image.width&height are always == 0;

[theonetheycallneo]

Me too. Mac OSX 10.9.4

      // add grid:
      var img = new Image
      var request = require('request').defaults({ encoding: null });
      request.get(glance.media.gridC.url, function (error, response, body)
      {
          if (!error && response.statusCode == 200)
          {
              //data = "data:" + response.headers["content-type"] + ";base64," + new Buffer(body).toString('base64');
              //console.log(data);
              c(fn,'request complete downloading ',glance.media.gridC.url)
              // img.dataMode = Image.MODE_IMAGE; // Only image data tracked
              // img.dataMode = Image.MODE_MIME; // Only mime data tracked
              img.dataMode = Image.MODE_MIME | Image.MODE_IMAGE; // Both are tracked
              img.src = new Buffer(body)
              img.xpos = startOffset.x
              img.ypos = startOffset.y
              img.scaleX = 1
              img.scaleY = 1
              //img.onload = function ()
              //{
                c(5)

                console.log('grid start location:',glance.grid.start.offset);
                // top left corner:
                //ctx.drawImage(img,0,0);
                // start:
                ctx.drawImage(img,-glance.grid.start.offset.x,-glance.grid.start.offset.y);

self.options.done() // called when job is completed

                // add function to execute every animation engine cycle
                //TweenMax.ticker.addEventListener("tick", loop);
                //TweenMax.to(img, 1.5, {xpos:100,ypos:100,repeat:-1,yoyo:true});
                //TweenMax.to(img, 15, {xpos:-500,ypos:-100,repeat:-1,yoyo:true, ease:Power2.easeInOut});
                //animate from 0 to whatever the scaleX/scaleY is now
                //TweenMax.to(img, 5, {scaleX:glance.grid.start.scale, scaleY:glance.grid.start.scale});
              //}
          }
      });

Error: Image given has not completed loading

[dzeikei]

I'm on OS-X as well and I followed the extra steps in the Windows installation. https://github.com/Automattic/node-canvas/wiki/Installation%3A-Windows It worked after using node-gyp to build the native module

[davidchase]

I tried @dzeikei trick on OS-X 10.9.5 and no bueno still same results

[q2dg]

I've been able to dodge this issue using readFileSync() method instead of readFile()/img.onload

[redspider]

For everybody on this ticket and for all those who will arrive in the future, please note that this error message MAY occur because you are attempting to load an image type that canvas does not support - probably due to a limited cairo build. You can verify this by trying to load a PNG instead which is typically supported. It is not clear why loading an unsupported image type results in this error message.

[dosapati]

Having the same issue to load jpg images. Tried installing libjpeg through brew still no luck. Works for PNG images and not for JPG images

[noam3127]

I was having this same problem, and the solution given by yhostc discussed in this issue ended up solving it:

brew update 
brew doctor
xcode-select --install
brew install cairo gobject-introspection pixman

[tomerb15]

@redspider How can we add JPEG support for node-canvas?

[redspider]

@tomerb15 node-canvas doesn't care about image types, if I recall correctly it is cairo that cares (cairo is a dependency). You have to make sure your cairo build has JPEG enabled. I can't help you with that though.

[spc16670]

I was having the issue every time when I tried to render the PNG image below onto the canvas.

I noticed that the rendering worked fine for other PNG images. So I used a hex editor (http://entropymine.com/jason/tweakpng/) to see what is different about the file.

The obvious difference was the header:

I removed the ancillary tEXt chunk, saved the file and re-rendered without any errors.

This fixed the issue for me. There might me other chunks that confuse canvas when rendering. It would be really nice to have some basic data cleansing there to save us fiddling around with binary formats.

[jshin49]

I'm having the same problem even when I use readFileSync.

My OS is Windows 10, and I've installed node-canvas as guided, and somehow it always fails with drawImage function.

[HaoCherHong]

@redspider the reason of getting this error message is that when we try to use(draw) the image, it's actually not completed loaded yet. If you add a handler on img.onerror you will see this error instead: "Error: error while reading from input stream". And we should stop processing right there.

[yeldarby]

I was getting this as well which was weird because I was sure the image was loaded before setting the data. But as mentioned above setting an onerror handler gave me a (weird) error.

It said "Out of memory" but it clearly wasn't. The issue ended up being a sRGB color profile that libpng didn't like. Stripping that fixed my issue. (in case anyone is ending up here from a google search like I did)

In my case it was IEC619966-2.1 that was the problem. Other pngs with other profiles worked fine.

[endquote]

I'm running into this on two Windows 7 machines and a Windows 10 machine. The image files are normal JPGs, and the same code with the same images works great on macOS.

[endquote]

As others have found, it looks like when following the install instructions for Windows (installing libjpgturbo), Cairo gets built without JPG support. The same code works fine if you work with PNGs.

So... maybe it's just a documentation issue?

[zbjornson]

There are a few different issues in this thread.

@endquote and @jshin49 JPEG support for Windows is PR #841 and isn't merged yet (but is functional if you want to use his fork). I'm not sure exactly what you're doing without more context, but that is likely what you're hitting. (And you're right, the install wiki has been updated already, even though code hasn't been merged yet!)

@yeldarby That's interesting and I think merits a new issue. The only other issue I see for color profiles is #725, which isn't what you've described.

A lot of the other reports I think are from building node-canvas without libjpeg support (at least three different posters). For debian/ubuntu this means having libjpeg-dev (or a variant), for MacOS see the wiki instructions https://github.com/Automattic/node-canvas/wiki/Installation:-Mac-OS-X#having-trouble-with-gif-or-jpegs. For windows, as above, that means using the fork in #841 or waiting for that to be merged.

Finally, a lot of this is better described in #486 ("not completed loading" is misleading) -- this error message occurs in a variety of situations unrelated to image loading: in addition to having a build without JPEG support, it apparently happens specifically for some color profiles (https://github.com/Automattic/node-canvas/issues/289#issuecomment-283699138) and unhandled PNG header chunks (https://github.com/Automattic/node-canvas/issues/289#issuecomment-196415998).

[zbjornson]

Closing per above.