在第一次加载页面时，图像没有显示在画布上

image not displaying on canvas on first load of page

本文关键字：显示 加载 第一次 图像      更新时间：2023-09-26

我正在开发模因生成器，我使用fabricjs和画布来做到这一点。然而，在第一次加载页面图像没有复制到画布，画布是空的，像这样，或按ctrl+f5在firefox:

下面是我的代码: html: 

<div class="col-centered" style="padding-top:15px;">
    <canvas id="canvas" width="{{$meme->width}}" height="{{$meme->height}}" style="border:0px solid white"></canvas>
</div>
javascript: 

var canvas = new fabric.Canvas('canvas');
canvas.selection = false;
canvas.renderAll();

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

所以当你的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示例https://jsfiddle.net/7doq6gvh/1/

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

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

这是一个很好的解决方案与fabric.js，但它更容易与window.onload = function () {<your canvas script> }

建议您修改image.onload();

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