Question

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

这是我的代码：

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();

Answer 1

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

会更容易

Answer 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 https://jsfiddle.net/7doq6gvh/1/

的示例

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

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

Answer 3

建议您使用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));
            };

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

3 个答案: