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

Question

我正在尝试使用fabric.js设置更改画布的背景图像，但遇到一些不稳定。 调用添加背景没有问题，但是如果我在画布上单击任意位置，它将变为空白，并且似乎进入选择模式-尽管这似乎是由于未捕获的异常所致。

我无法弄清楚是什么原因引起的。 在此页面http://fabricjs.com/customization/上运行良好，但以下jsfiddle失败了http://jsfiddle.net/YH9yD/20/

var canvas = window._canvas = new fabric.Canvas('c');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});
this.__canvases.push(canvas);

Answer 1

在添加到画布之前，请尝试加载图像。 如果添加未加载的图像，则会出现异常。 这对我们有用：

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"

问候，贝尼克

Answer 2

尝试这个

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

    canvas.renderAll();