gpt4 book ai didi

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

转载 作者:IT老高 更新时间:2023-10-28 23:03:53 28 4
gpt4 key购买 nike

下面的代码应该读取一个图像文件,然后在 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/');

最佳答案

如果我在这里错了,我深表歉意,但您似乎在某处找到了此代码并尝试使用它,但并未真正了解幕后发生的事情。即使您要修复 Image is not defined 错误,还有很多其他错误。

我在这篇文章的末尾有固定的代码,但我建议您更深入地考虑您问题代码中的这些问题:

  • 什么是图像?它从何而来?您已经导入了 httpfsCanvas,所以这些东西显然已经定义好了。但是,Image 没有在任何地方定义,也不是内置的。

    事实证明,Image 来自您使用 Canvas = require('canvas') 导入的 node-canvas 模块。这意味着 Image 可以作为 Canvas.Image 使用。

    了解这是因为您设置了导入,这一点很重要。您可以轻松地完成 abc = require('canvas'),然后 Image 将作为 abc.Image 可用。

  • 什么是ctx?这是从哪里来的?

    同样,这是另一个尚未在任何地方定义的变量。与 Image 不同,它不能作为 Canvas.ctx 使用。它只是一个随机变量名,此时不对应任何内容,因此尝试对其调用 drawImage 会引发异常。

  • canvas(小写)呢?那是什么?

    您正在使用 canvas.toDataURL,但在任何地方都没有名为 canvas 的变量。你希望这段代码做什么?现在它只会抛出一个异常,说 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/');

关于image - nodejs - 如何将文件中的图像数据添加到 Canvas 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9548074/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com