nodejs - 如何将文件中的图像数据添加到画布中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9548074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nodejs - How to add image data from file into canvas
提问by mesh
The following code is supposed to read an image file and then add the file data into a canvas with the help of the Canvas module.
下面的代码应该读取一个图像文件，然后在 Canvas 模块的帮助下将文件数据添加到画布中。
When I run this code I receive the error message Image is not defined. Is the image object that I'm trying to initialise from a module that I simply import?
当我运行此代码时，我收到错误消息Image is not defined。我试图从我简单导入的模块初始化的图像对象是？
var http = require('http'), fs = require('fs'),
Canvas = require('canvas');
http.createServer(function (req, res) {
fs.readFile(__dirname + '/image.jpg', function(err, data) {
if (err) throw err;
img = new Image();
img.src = data;
ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);
res.write('<html><body>');
res.write('<img src="' + canvas.toDataURL() + '" />');
res.write('</body></html>');
res.end();
});
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
回答by Rohan Singh
I apologize if I'm wrong here, but it looks like you've found this code somewhere and tried to use it without actually understanding what's happening under the covers. Even if you were to fix the Image is not definederror, there are many others.
如果我在这里弄错了，我深表歉意，但您似乎在某处找到了此代码并尝试使用它，而实际上并未真正了解幕后发生的事情。即使您要修复Image is not defined错误，还有许多其他错误。
I have the fixed code at the end of this post, but I'd recommend thinking more deeply about these issues in the code from your question:
我在这篇文章的末尾有固定的代码，但我建议从你的问题中更深入地思考代码中的这些问题：
What is
Image? Where does it come from? You've importedhttp,fs, andCanvas, so those things are obviously defined. However,Imagehase not been defined anywhere and it is not a built-in.As it turns out,
Imageis from the node-canvas module, which you've imported withCanvas = require('canvas'). This means thatImageis available asCanvas.Image.It's important to understand that this is because of the imports you've setup. You could just have easily have done
abc = require('canvas'), and thenImagewould be available asabc.Image.What is
ctx? Where is that coming from?Again, this is another variable that just hasn't been defined anywhere. Unlike
Image, it isn't available asCanvas.ctx. It's just a random variable name that doesn't correspond to anything at this point, so trying to calldrawImageon it is going to throw an exception.What about
canvas(lowercase)? What is that?You are using
canvas.toDataURL, but there is no variable calledcanvasanywhere. What are you expecting this piece of code to do? Right now it's just going to throw an exception saying that canvas is undefined.
什么是
Image？它从何而来？您已导入http,fs, 和Canvas，因此显然已定义了这些内容。但是，Image尚未在任何地方定义，也不是内置的。事实证明，
Image来自 node-canvas 模块，您已使用Canvas = require('canvas'). 这意味着Image可以作为Canvas.Image.重要的是要了解这是因为您设置了导入。您可以轻松完成
abc = require('canvas')，然后Image将作为abc.Image.什么是
ctx？这是从哪里来的？同样，这是另一个尚未在任何地方定义的变量。与 不同
Image，它不能作为Canvas.ctx. 它只是一个随机变量名称，此时不对应任何内容，因此尝试调用drawImage它会引发异常。怎么样
canvas（小写）？那是什么？您正在使用
canvas.toDataURL，但在canvas任何地方都没有调用变量。你期望这段代码做什么？现在它只会抛出一个异常，说画布是未定义的。
I'd recommend reading documentation more closely and looking more closely at any example code you copy into your own applications in the future.
我建议您更仔细地阅读文档，并更仔细地查看您将来复制到自己的应用程序中的任何示例代码。
Here is the fixed code, with some comments to explain my changes. I figured this out by taking a quick look at the documentation at https://github.com/learnboost/node-canvas.
这是固定代码，并附有一些注释来解释我的更改。我通过快速查看https://github.com/learnboost/node-canvas上的文档来解决这个问题。
var http = require('http'), fs = require('fs'),
Canvas = require('canvas');
http.createServer(function (req, res) {
fs.readFile(__dirname + '/image.jpg', function(err, data) {
if (err) throw err;
var img = new Canvas.Image; // Create a new Image
img.src = data;
// Initialiaze a new Canvas with the same dimensions
// as the image, and get a 2D drawing context for it.
var canvas = new Canvas(img.width, img.height);
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4);
res.write('<html><body>');
res.write('<img src="' + canvas.toDataURL() + '" />');
res.write('</body></html>');
res.end();
});
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');
