Canvas Image src needs +=

[maxstudener]

I'd like to download an image from external source and on req.on('data', function(chunk)) id like to take the stream chunks of image from external source to canvas then on req.on('end') id like to then ctx.drawImage

[maxstudener]

current code that works, has image in buffer from http download then assigning to img.src im assuming this will suck up all of memory, memory is faster than I/O but would like to put chunks directly right in img.src instead of in buffer

router.get('/', function(req, res) {

  var http = require('http');
  var http_options = {
    host: 'th01.deviantart.net',
    port: 80,
    path: '/fs71/200H/f/2012/208/0/2/meme_ay_si_png_by_mfsyrcm-d58vmvz.png'
  };

  http.get(http_options, function(resp) {
    console.log('downloading');

    var bufs = [];

    var Canvas = require('canvas');
    var Image = Canvas.Image;

    resp.on('data', function(chunk) {
        console.log(chunk.length)
        bufs.push(chunk);
     })

    resp.on('end', function() {
       console.log('done')

       var buf = Buffer.concat(bufs);


        img = new Image;

        img.onload = function(){
          var w = img.width
            , h = img.height
            , canvas = new Canvas(w, h)
            , ctx = canvas.getContext('2d');


          ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);

          canvas.toBuffer(function(err, canvas_buf){
            res.writeHead(200, { 'Content-Type': 'image/png', 'Content-Length': canvas_buf.length });
            res.end(canvas_buf);
          });
        }

        img.src = buf;


    });// on external image call end

  });// http get

}); // index route

[shawnbot]

+1 on this. It'd be really nice to have an async way to stream bytes into an Image.

[TooTallNate]

The real way to do this would be to have img.src support a Readable stream instance.

[shawnbot]

👍

[LinusU]

What @TooTallNate said, allowing src += _ would just move the buffer from you program to canvas, it wouldn't make a difference...

I don't actually think that there would be any added memory benefit of reading the file chunk by chunk, since that would require you to either allocate the entire raw image on the first chunk, or do excessive copying of data...

I'm closing this for now, if anyone has more information or thoughts on how this should be implemented, please feel free to reopen...