使用Fabric.js時，背景圖片並非每次都出現

Question

嗨，我在示例中使用背景圖片。 如果我重新加載頁面，它將顯示一次，但是如果我再次運行該程序，則不會出現。

我嘗試使用setBackgroundImage設置圖像，然后進行渲染。 刷新頁面后，它首先顯示，但此后不起作用。

小提琴在這里-http://jsfiddle.net/wv9MU/6/

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');

canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png',function() { 
  canvas.renderAll(); 
});


 canvas.setHeight(400);
 canvas.setWidth(1300);
canvas.renderAll();
// create a rectangle object


document.getElementById('1').addEventListener('click', function (e) {
// create a rectangle1 object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'aqua',

  width: 200,
  height: 200
});

// "add" rectangle1 onto canvas
canvas.add(rect);
rect.lockRotation=true;

 canvas.renderAll();   
 });

canvas.setBackgroundImage('C:\Users\131321\Desktop\abc.jpg', canvas.renderAll.bind(canvas));


document.getElementById('2').addEventListener('click', function (e) {
// create a rectangle2 object
var rect = new fabric.Rect({
  left: 150,
  top: 150,
  fill: 'green',
  width: 50,
  height: 50
});

// "add" rectangle2 onto canvas
canvas.add(rect);
rect.lockRotation=true;
 canvas.renderAll();   
 });

Answer 1

看起來這是因為您正在加載本地文件，並且僅當您單擊run時：

Not allowed to load local resource: file:///C:/UsersY321Desktopabc.jpg (index):1
Error loading file:///C:/UsersY321Desktopabc.jpg 

如果我將line 36更改為

canvas.setBackgroundImage('http://www.placehold.it/250x250', canvas.renderAll.bind(canvas));

它每次都起作用。 http://jsfiddle.net/wv9MU/7/

嘗試將UsersY321Desktopabc.jpg添加到您的網站文件夾，然后從那里鏈接它。