Error: Image given has not completed loading

[kricha]

I'm trying to add remove image to canvas, but there is some troubles.

i'm getting this:

        ctx.drawImage(avatar, 50, 50 );
            ^

Error: Image given has not completed loading
    at Request.request.get

I want to do this on server side (using express):

app.get('/test', (req, res) => {
    let Canvas = require('canvas')
        , Image = Canvas.Image
        , canvas = new Canvas(500, 500)
        , ctx = canvas.getContext('2d');

    let request = require('request');
    let avatar = new Image;
    request.get('http://s.4pda.to/pKugVJ7TmgG1Tg5z0SsVLfRCUqTAz2oqz1lz2z2co.jpg', (err, res) => {
        avatar.src = res;
        ctx.drawImage(avatar, 50, 50 );
    });

    ctx.font = '30px Impact';
    ctx.rotate(.1);
    ctx.fillText("Awesome!", 50, 100);
    let te = ctx.measureText('Awesome!');
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.beginPath();
    
    ctx.stroke();
    
    res.setHeader('Content-Type', 'image/png');
    canvas.pngStream().pipe(res)
});
// etc.

Your Environment

• Version of node-canvas (e.g. 1.6.6):
• Environment (e.g. node 8.3.0 on Mac OS X 10.12.6):

I have already tried to reinstall, rebuilt and do all from manual.

[LinusU]

Could you try waiting for the onload to fire on the image?

Actually, that might not even be to problem, is res really a Buffer instance? It should probably be something like avatar.src = res.body.

     request.get('http://s.4pda.to/pKugVJ7TmgG1Tg5z0SsVLfRCUqTAz2oqz1lz2z2co.jpg', (err, res) => {
-        avatar.src = res;
-        ctx.drawImage(avatar, 50, 50 );
+        avatar.onload = () => ctx.drawImage(avatar, 50, 50)
+        avatar.src = res.body
     });

I think another problem might be that you are sending the canvas to the browser before the image have been drawn to it, you need to wait with sending the response until all operations are done.

Maybe something like this would be better:

const Canvas = require('canvas')
const request = require('request')

function loadImage (url) {
  return new Promise((resolve, reject) => {
    const img = new Canvas.Image()

    img.onload = () => resolve(img)
    img.onerror = () => reject(new Error('Failed to load image'))

    request.get(url, (err, res) => {
      if (err) return reject(err)

      img.src = res.body
    })
  })
}

app.get('/test', (req, res, next) => {
  loadImage('http://s.4pda.to/pKugVJ7TmgG1Tg5z0SsVLfRCUqTAz2oqz1lz2z2co.jpg')
    .then((avatar) => {
      const canvas = new Canvas(500, 500)
      const ctx = canvas.getContext('2d')

      ctx.font = '30px Impact'
      ctx.rotate(0.1)
      ctx.fillText('Awesome!', 50, 100)
      ctx.drawImage(avatar, 50, 50)

      res.setHeader('Content-Type', 'image/png')
      canvas.pngStream().pipe(res)
    })
    .catch((err) => {
      next(err)
    })
})

LPT: if you have a variable that won't change, declare it using const instead of let to avoid accidentally changing it further down in the code, and to communicate the intent of never changing the value of the variable

[kricha]

@LinusU, thanks for answer.
I tried your code, and look what i got:

add console.log(er) to onerror give me this:
Error: error while reading from input stream
but! if i try to log res.body i could see binary image data. I don't understand what is the problem.

UPD: i have tried to get image with http instead of request:

const http = require('http');
function loadImage (url) {
    return new Promise((resolve, reject) => {
        const img = new Canvas.Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject(new Error('Failed to load image'));
        http.get(url, (res) => {
            let buf = '';
            res.setEncoding('binary');
            res.on('data', function(chunk){ buf += chunk; });
            res.on('end', function(){
                let canvas = new Canvas();
                img.src = new Buffer(buf, 'binary');
            });
        })
    })
}

any thoughts why i couldn't get image with request?

[LinusU]

I think that storing the result in a string might mess up the file, could you try saving the chunks and using Buffer.concat instead? Something like this:

const http = require('http')
const Canvas = require('canvas')

function loadImage (url) {
  return new Promise((resolve, reject) => {
    const img = new Canvas.Image()

    img.onload = () => resolve(img)
    img.onerror = () => reject(new Error('Failed to load image'))

    http.get(url, (res) => {
      let chunks = []

      res.on('error', (err) => { reject(err) })
      res.on('data', (chunk) => { chunks.push(chunk) })
      res.on('end', () => { img.src = Buffer.concat(chunks) })
    })
  })
}

[zbjornson]

Linus's example works for me with the URL in the original post. I think the string encoding was the issue.