使用node-canvas处理远程图像时出错：“给定的图像尚未完成加载”

我试图使用节点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) 

任何想法可能是什么问题？ 谢谢。

Answer 1

当您需要将其作为二进制数据保存在Buffer时，您将响应中的数据视为String 。 节点帆布正在img.src二进制数据被传递到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); }); }); 

Answer 2

这一定是jpg问题（我不知道），如果你的图片是PNG，我认为它会好的

请安装libjpeg来解决问题:)