Question

以下代码应该读取图像文件，然后在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/');

Answer 1

如果我在这里错了，我道歉，但看起来你已经在某个地方找到了这个代码，并试图在没有真正理解封面下发生的事情的情况下使用它。即使您要修复图像未定义错误，也会有很多其他错误。

我在本文末尾有固定的代码，但我建议您在问题的代码中更深入地思考这些问题：

什么是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的变量。你期望这段代码做什么？现在它只是抛出一个异常，说画布未定义。

我建议您更仔细地阅读文档，并仔细查看将来复制到自己的应用程序中的任何示例代码。

这是固定代码，有一些注释可以解释我的更改。我通过快速浏览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/');

Answer 2

node-canvas 现在有一个辅助函数 loadImage，它返回一个解析为加载的 Image 对象的 Promise。这可以防止像在接受的答案中那样处理 onload 处理程序。

const http = require('http'); 
const fs = require('fs');
const Canvas = require('canvas');

http.createServer(function (req, res) {
    fs.readFile(__dirname + '/image.jpg', async function(err, data) {
        if (err) throw err;
        const img = await Canvas.loadImage(data);
        const canvas = new Canvas(img.width, img.height);
        const 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/');

nodejs - 如何将文件中的图像数据添加到画布中

2 个答案: