使用节点画布操纵远程图像时出错:“给定的图像尚未完成加载” [英] Error manipulating a remote image using node-canvas: "Image given has not completed loading"
本文介绍了使用节点画布操纵远程图像时出错:“给定的图像尚未完成加载”的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图使用node-canvas来操作远程服务器上存储的图像。我开始与image-src示例和修改它,但我不能让它工作。这是我的代码:
I'm trying to use node-canvas to manipulate an image stored on a remote server. I started with the image-src example and modified it, but I can't get it to work. Here's my code:
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);
});
});
}
);
...这里是我得到的错误:
...and here's the error I'm getting:
/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)
任何想法可能是什么问题?感谢。
Any idea what the problem might be? Thanks.
推荐答案
您将响应中的数据视为 String
当你需要将它保存为 Buffer
中的二进制数据。 Node-canvas期望将二进制数据传递到 img.src
。
You're treating the data in the response as a String
when you need to keep it as binary data in a Buffer
. Node-canvas is expecting binary data to be passed into img.src
.
handler:
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);
});
});
这篇关于使用节点画布操纵远程图像时出错:“给定的图像尚未完成加载”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文