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

我已经查看了所有相关问题，但没有找到答案。 在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);
        }

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.src = buffer
img.onload = function(){ ... }    

请执行以下操作：

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

---

每当我试图将下面的PNG图像渲染到画布上时，我都会遇到这个问题

我注意到其他PNG图像的渲染效果很好。因此，我使用了一个十六进制编辑器（）来查看文件的不同之处

明显的区别在于标题：

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

这为我解决了这个问题。渲染时可能会有其他块混淆画布。如果能有一些基本的数据清理来避免我们摆弄二进制格式，那就太好了

---

请参阅：

错误本身就是明证

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

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

大概是这样的：

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

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 box），我花了20分钟在ubuntu上安装了所有东西，效果非常好。

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

brew prune

然后运行：

brew doctor

这将列出丢失的所有链接。遵循医生提供的链接说明。如果链接失败，请运行：

brew update

然后再次运行链接命令

完成所有这些操作后，重新安装画布：

npm install canvas

---

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

首先尝试

base\u image.on（'load'，function（）{…}）

我尝试了：TypeError:Object\35;没有方法“on”问题，听起来很相关是的，但他们没有帮助我。我的机器可以在窗口和画布的其他部分工作——线条、文本都可以正常工作。也许我需要一些额外的lib？如果您使用

var canvas=new（require（'canvas'））（400400）

和

require（'fs'）。readFile

，它能工作吗？我从未使用过

global

，可能是它导致了一些问题？最后，确保检查F12控制台以查看是否出现错误，您不需要对节点画布图像对象执行此操作。它的工作原理不同于浏览器。如果你打算否决某个答案，请在评论中解释原因。这个答案与给定信息的问题相关。