Question

使用以下代码创建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();

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

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

为什么你认为我有这个问题？我做错了吗？我怎么能解决这个问题？

Answer 1

fabric.image.fromURL是异步的。如果要尽快显示backgroundimage，则必须在回调内调用renderAll（）。

否则，鼠标单击将在加载完成后触发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();
    });

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

Fabric.js背景仅在单击后出现

2 个答案:

B64 解决方法：