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

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/）来查看文件的不同之处。

明显的区别是标题：

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

这解决了我的问题。在渲染时，可能还有其他块会混淆canvas。那里有一些基本的数据清理真的很不错，可以让我们摆弄二进制格式。

请参阅：https://github.com/Automattic/node-canvas/issues/289

Answer 3

如果您使用OSX并使用自制程序来安装画布依赖项，则可能需要运行：

brew prune

然后运行：

brew doctor

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

brew update

然后再次运行链接命令。

毕竟，重新安装canvas：

npm install canvas

如果你在OSX上用自制软件看到它，这应该可以解决问题。

Answer 4

错误不言而喻。

Image还没有完成缓冲区加载，你正在尝试在它仍然加载的情况下对它进行操作 - 因此你得到了这个错误。

你应该绑定到“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（）”，这可能意味着您对开罗支持的库有问题 - 在我的情况下，我能够加载.png文件，但.gif.jpg没用。

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

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