Node.js，画布：给定的图像尚未完成加载

Question

我查看了所有相关问题，但没有找到答案。 当我在 node.js 中使用此代码时：

var canvas = new global.canvas(400, 400), ctx = canvas.getContext('2d');
global.fs.readFile('test.png', function (err, data) {
    if (!err) {
        var base_image = new global.canvas.Image;
        base_image.src = data;
        ctx.drawImage(base_image, 0, 0, 100, 100);        
    }
    else
        console.log(err);
});

我收到错误：给定的图像尚未完成加载 当我添加 onload 事件时，如下所示：

base_image.onload = function () {
            ctx.drawImage(base_image, 0, 0, 100, 100);
        }

它根本不会着火。 请帮我找到答案。

Answer 1

代替

img.src = buffer
img.onload = function(){ ... }    

执行以下操作：

img.onload = function(){ ... } 
img.src = buffer

Answer 2

每次我尝试将下面的 PNG 图像渲染到画布上时都会遇到问题。

我注意到其他 PNG 图像的渲染效果很好。所以我使用了十六进制编辑器 (http://entropymine.com/jason/tweakpng/) 来查看文件有什么不同。

明显的区别是标题：

我删除了辅助文本块，保存文件并重新渲染，没有任何错误。

这为我解决了这个问题。渲染时可能还有其他块会混淆画布。在那里进行一些基本的数据清理以节省我们对二进制格式的摆弄，真是太好了。

见：https://github.com/Automattic/node-canvas/issues/289

Answer 3

如果您在 OSX 上并使用自制软件安装您可能需要运行的画布依赖项：

brew prune

然后运行：

brew doctor

这将列出所有缺失的链接。按照医生提供的链接说明进行操作。如果链接失败，运行：

brew update

然后再次运行链接命令。

在这一切之后，重新安装画布：

npm install canvas

如果您在 OSX 上使用 homebrew 看到它，这应该可以解决问题。

Answer 4

错误不言自明。

图像尚未完成其缓冲区加载，您正试图在它仍在加载时对其进行操作 - 因此您会收到此错误。

您应该绑定到“onload”事件，然后才进行操作。

类似这样的：

var img = new Image;
img.src = image;
var canvas = new Canvas(img.width, img.height),
    context = canvas.getContext('2d');

img.onload = function() { 
    context.drawImage(img, 0, 0, img.width, img.height); 
}

请注意，如果您的应用程序不会进入“img.onload()”，这可能意味着您对 Cairo 支持的库有问题 - 在我的情况下，我能够加载 .png 文件但 .gif.jpg没用。

我不得不深入挖掘并安装 libjpeg-turbo。

另一方面，我创建了一个非常简单的 ubuntu 可视化（带有 VM 框），我花了大约 20 分钟在 ubuntu 上安装所有东西，并且运行良好。