nodejs – 如何将文件中的图像数据添加到canvas
下面的代码应该读取一个图像文件,然后在Canvas模块的帮助下将文件数据添加到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; 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/');
我很抱歉,如果我在这里是错误的,但它看起来像你已经find了这个代码的地方,并试图使用它没有真正了解到底是什么发生。 即使你要修复图像没有定义的错误,还有很多其他的。
我在这篇文章的最后有固定的代码,但是我build议你从问题的代码中更深入地思考这些问题:
-
什么是
Image
? 它从何而来? 你已经导入了http
,fs
和Canvas
,所以这些东西显然是被定义的。 然而,Image
hase没有被定义在任何地方,它不是一个内置的。事实certificate,
Image
来自于Canvas = require('canvas')
导入的node-canvas模块。 这意味着Image
可以作为Canvas.Image
。了解这一点很重要,因为你已经设置了导入。 您可以轻松完成
abc = require('canvas')
,然后Image
将作为abc.Image
。 -
什么是
ctx
? 那来自哪里?再次,这是另一个variables,只是没有被定义在任何地方。 与
Image
不同,它不可用作Canvas.ctx
。 这只是一个随机的variables名称,在这一点上不对应任何东西,所以试图调用drawImage
会抛出一个exception。 -
那么
canvas
(小写)呢? 那是什么?您正在使用
canvas.toDataURL
,但是在任何地方都没有名为canvas
variables。 你期待这段代码做什么? 现在只是抛出一个exception说canvas是未定义的。
我build议您仔细阅读文档,并仔细查看将来复制到自己的应用程序中的任何示例代码。
这里是固定的代码,有一些评论来解释我的变化。 我通过快速浏览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/');