Fabric.js 背景仅在点击后出现答案

【问题标题】：Fabric.js background appears only after clickFabric.js 背景仅在点击后出现
【发布时间】：2016-05-16 12:11:39
【问题描述】：

使用以下代码我创建了一个 Fabric 画布

canvas = new fabric.Canvas('canvas');
canvas.setWidth(660);
canvas.setHeight(590);

fabric.Image.fromURL('assets/img/materials/marble.bmp', function(image) {
    image.set({
        // I need this because the image size and the canvas size could be different
        // in this way the image always covers the canvas
        width:660,
        height:590
    });

    canvas.setBackgroundImage(image);
});

canvas.renderAll();

画布已创建，但除非我在画布内部单击，否则背景图像不会出现，因为我在画布内部单击时会出现背景。

我在本地机器上工作，应用程序不会在线发布。

你为什么认为我有这个问题？我做错什么了吗？我该如何解决这种行为？

【问题讨论】：

尝试在回调中调用canvas.renderAll() function(image) - fabric.Image.fromURL 可能会异步加载图像，因此代码的最后一行会在图像加载之前运行。
谢谢，这行得通。作为评论，我无法将您的答案设置为正确的答案。
不客气！没关系——有无数这样的问题；它可能会被可以找到链接到的最佳答案的人标记为重复；-)
仅供参考，这个问题也与图像对象有关（不仅仅是背景图像）。在回调中使用canvas.renderAll() 的以下解决方案似乎有效。

标签： javascript canvas fabricjs

【解决方案1】：

fabric.image.fromURL 是异步的。如果要尽快显示背景图像，则必须在回调中调用 renderAll()。

否则，您的鼠标单击将在加载完成后的几分之一秒内触发渲染，并且将渲染背景。

canvas = new fabric.Canvas('canvas');
canvas.setWidth(660);
canvas.setHeight(590);

    fabric.Image.fromURL('assets/img/materials/marble.bmp', function(image) {
        image.set({
            // I need this because the image size and the canvas size could be different
            // in this way the image always covers the canvas
            width:660,
            height:590
        });

        canvas.setBackgroundImage(image);
        canvas.renderAll();
    });

【讨论】：

既然setBackgroundImage() 也是异步的，那么在setBackgroundImage 的可选回调参数中调用canvas.renderAll() 不是更安全吗？（我希望这个库对 Promise 友好。）
因为setBackgroundImage 接收图像对象作为参数不应该是异步的。是吗？
setBackgroundImage 是异步的。它有一个可选的第二个回调参数。也许在早期版本中情况并非如此——我是面料新手。我只是提到它，以防我可以避免因不处理这种细微差别而遇到的麻烦。
理论上你不需要在这种情况下使用回调，你也可以简单地做canvas.backgroundImage=image并使用renderAll或requestRenderall

【解决方案2】：

就我而言，Safari iOS 大约 20-60% 的时间不会渲染背景（版本 "fabric": "^4.3.1"）。等待没有解决。点击画布将激活/渲染背景。在各个地方添加renderAll() 并没有为我解决它。没有发生在 Chrome 上，只有 Safari iOS（当时是 14.1 版）

B64 解决方法：

删除fabric.Image.fromURL 并改为向setBackgroundImage 提供b64 图像对我来说在所有浏览器中都有效。

let myImg = `data:image/jpeg;charset=utf-8;base64,<- base64 data->`

this.canvasObj.setBackgroundImage(
  myImg, //b64
  this.canvasObj.renderAll.bind(this.canvasObj)
);

【讨论】：