Javascript 第一次加载页面时图像未显示在画布上

我正在开发meme生成器，我使用fabricjs和canvas来完成这项工作。但是，在第一次加载页面图像时，图像没有复制到画布，画布是空的，如下所示，或者在firefox中按ctrl+f5：

这是我的密码：

html:

---

在我测试了你们的网站之后，我发现画布是空的，因为下载图片需要时间

因此，当JavaScript运行这些代码时，图像仍然没有下载

canvas.add(imgInstance);
canvas.renderAll();

尝试改用fabric.Image.fromURL，并在其上绑定回调函数可能会解决此问题

var imgElement = document.getElementById('originalmeme');
var imgSource = imgElement.src;

fabric.Image.fromURL(imgSource, function(img) {
    img.set({top: 0, left: 0, angle: 0, opacity: 1, selectable: false});
    canvas.add(img);
});

JSfiddle上的示例

注意：即使使用fabric.Image.fromURL，下载图像仍然需要时间。下载你的图片需要6-8秒。尝试在其他主机上托管映像可能会有帮助

---

注2：重新加载页面时显示图像的原因是浏览器已经缓存了第一次加载的图像。

我测试了您的网站后，发现画布是空的，因为下载图像需要时间

因此，当JavaScript运行这些代码时，图像仍然没有下载

canvas.add(imgInstance);
canvas.renderAll();

尝试改用fabric.Image.fromURL，并在其上绑定回调函数可能会解决此问题

var imgElement = document.getElementById('originalmeme');
var imgSource = imgElement.src;

fabric.Image.fromURL(imgSource, function(img) {
    img.set({top: 0, left: 0, angle: 0, opacity: 1, selectable: false});
    canvas.add(img);
});

JSfiddle上的示例

注意：即使使用fabric.Image.fromURL，下载图像仍然需要时间。下载你的图片需要6-8秒。尝试在其他主机上托管映像可能会有帮助

---

注2：重新加载页面时显示图像的原因是浏览器已经缓存了第一次加载的图像。

这是fabric.js的一个很好的解决方案，但是使用

window.onload=function（）{}

这是fabric.js的一个很好的解决方案，但是使用

window.onload=function（）{}更容易

建议您处理image.onload（）

---

建议您处理image.onload（）

---

您好，我创建了这个小提琴，它使用我服务器上的图像，工作时没有任何缺陷：另外，如果我按ctrl+f5加载页面，本地主机图像也会出现同样的问题。看起来fromURL至少在本地主机上对我有效，但在我添加canvas.add（img）等图像后，还没有在我的服务器上测试它然后稍后使用canvas.add（topText）添加文本；canvas.add（底部文本）；文本不呈现它位于图像下方，而不是图像顶部，你知道为什么吗？我很想从上面显示的文本中获得解决方案。事实上，您的解决方案非常有效，我用canvas.insertAt（img，0）解决了文本问题；谢谢您好，我创建了这个小提琴，它使用我服务器上的图像，工作时没有任何缺陷：另外，如果我按ctrl+f5加载页面，本地主机图像也会出现同样的问题。看起来fromURL至少在本地主机上对我有效，但在我添加canvas.add（img）等图像后，还没有在我的服务器上测试它然后稍后使用canvas.add（topText）添加文本；canvas.add（底部文本）；文本不呈现它位于图像下方，而不是图像顶部，你知道为什么吗？我很想从上面显示的文本中获得解决方案。事实上，您的解决方案非常有效，我用canvas.insertAt（img，0）解决了文本问题；谢谢

var canvas = new fabric.Canvas('canvasId');
img.onload = function () {
                canvas.setHeight(Height);
                canvas.setWidth(Width);
                canvas.setBackgroundImage("img path", canvas.renderAll.bind(canvas));
            };