使用节点画布操作远程图像时出错：“给定的图像尚未完成加载”答案

【问题标题】：Error manipulating a remote image using node-canvas: "Image given has not completed loading"使用节点画布操作远程图像时出错：“给定的图像尚未完成加载”
【发布时间】：2014-07-01 18:21:31
【问题描述】：

我正在尝试使用 node-canvas 来操作存储在远程服务器上的图像。我从 image-src 示例开始并对其进行了修改，但我无法让它工作。这是我的代码：

var fs = require('fs'),
    http = require('http'),
url = require('url'),
canvas = require('./node-canvas/lib/canvas');

var outCanvas = new canvas(1000, 750);
var ctx = outCanvas.getContext('2d');

http.get(
    {
        host: 'farm8.staticflickr.com',
        port: 80,
        path: '/7108/7038906747_69a526f070_z.jpg'
    },
    function(res) {
        var data = '';
        res.on('data', function(chunk) {
            data += chunk;
        });
        res.on('end', function () {
            img = new canvas.Image;
            img.src = data;
            ctx.drawImage(img, 0, 0, img.width, img.height);

            var out = fs.createWriteStream(__dirname + '/my-out.png')
                , stream = outCanvas.createPNGStream();

            stream.on('data', function(chunk){
                out.write(chunk);
            });
        });
    }
);

...这是我得到的错误：

/Users/daf/Documents/lolstagram/lolstagram-c.js:23
    ctx.drawImage(img, 0, 0, img.width, img.height);
       ^
Error: Image given has not completed loading
    at IncomingMessage.<anonymous> (/Users/daf/Documents/lolstagram/lolstagram-c.js:23:8)
    at IncomingMessage.emit (events.js:88:20)
    at HTTPParser.onMessageComplete (http.js:137:23)
    at Socket.ondata (http.js:1150:24)
    at TCP.onread (net.js:374:27)

知道问题可能是什么吗？谢谢。

【问题讨论】：

标签： node.js canvas cairo

【解决方案1】：

当您需要将响应中的数据作为二进制数据保存在Buffer 中时，您将其视为String。 Node-canvas 期望将二进制数据传递到img.src。

这应该在您的 http 响应处理程序中工作：

var data = new Buffer(parseInt(res.headers['content-length'],10));
var pos = 0;
res.on('data', function(chunk) {
  chunk.copy(data, pos);
  pos += chunk.length;
});
res.on('end', function () {
  img = new canvas.Image;
  img.src = data;
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var out = fs.createWriteStream(__dirname + '/my-out.png')
    , stream = outCanvas.createPNGStream();

  stream.on('data', function(chunk){
    out.write(chunk);
  });
});

【讨论】：

嗨，我使用了你的代码，仍然得到相同的信息，ctx.drawImage(img, 0, 0, img.width, img.height); ^ 错误：在 IncomingMessage. (/Users/jiguang/www/node/api.js:25:17) 在 IncomingMessage.EventEmitter.emit (events.js:117:20) 在 _stream_readable 处给定的图像尚未完成加载.js:920:16 at process._tickCallback (node.js:415:13)，还有其他问题吗？谢谢！

【解决方案2】：

应该是jpg的问题（我不知道）我觉得你的图片是png就可以了

请安装libjpeg 来解决这个问题:)

【讨论】：