Javascript 在fabric.js中设置背景图像会在单击时引发异常

我试图使用fabric.js为画布设置更改背景图像，但遇到了一些不稳定的情况。添加背景的调用没有任何问题，但是如果我单击画布上的任何地方，它将变为空白并似乎移动到选择模式-尽管这似乎只是由于未捕获的异常

我不知道是什么导致了这种行为。它在这个页面上运行良好，但是下面的JSFIDLE失败了

试试这个

canvas.setBackgroundImage('add image source', canvas.renderAll.bind(canvas), {
        scaleY: canvas.height ,
        scaleX: canvas.width 
    });

    canvas.renderAll();

试试这个

canvas.setBackgroundImage('add image source', canvas.renderAll.bind(canvas), {
        scaleY: canvas.height ,
        scaleX: canvas.width 
    });

    canvas.renderAll();

---

尝试在添加到画布之前加载图像。如果您添加了一个尚未加载的图像，您将得到一个异常。这对我们有用：

var img = new Image();
img.onload = function(){
   canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
            originX: 'left',
            originY: 'top',
            left: 0,
            top: 0
        });
};
img.src = "your image source"

问候,，

---

Benick

在添加到画布之前尝试加载图像。如果您添加了一个尚未加载的图像，您将得到一个异常。这对我们有用：

var img = new Image();
img.onload = function(){
   canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
            originX: 'left',
            originY: 'top',
            left: 0,
            top: 0
        });
};
img.src = "your image source"

问候,，

---

Benick

查看堆栈上的此参考链接查看堆栈上的此参考链接抱歉，但问题似乎是结构内部的。以下链接来自setBackgroundImage函数上的文档，其失败方式与此相同。抱歉，此问题似乎是fabric内部的问题。以下链接来自setBackgroundImage函数的docs，它以同样的方式失败。我发现将图像移动到同一个域解决了问题，但根据我看到的行为，上面的答案似乎完全有效-并允许从不同域提取图像。此解决方案对我有效。在添加到画布之前，我们必须加载图像。我发现，将图像移动到同一个域解决了问题，但根据我看到的行为，上面的答案似乎完全有效，并且允许从不同域提取图像。这个解决方案对我有效。我们必须在添加到画布之前加载图像