使用外部 url 時，fabric.js fabric.Image.fromURL 拋出錯誤

Question

我一直在嘗試使用fabric.js 的fabric.Image.fromURL 將圖像添加到我的畫布，其中圖像位於另一台服務器上。

圖像被添加和加載得很好，但是一旦我開始移動它或調整它的大小，它就會消失。 Firebug 然后將 fabric.js 腳本中錯誤的附近顯示為“fabric.Image 已定義”附近的某處。

這是我的代碼：

<canvas id="c" width="600" height="300"></canvas>

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://img3.wikia.nocookie.net/__cb20120402213942/masseffect/images/5/57/Small_Arms_Codex_Image.jpg', function(oImg) {
    oImg.scale(1.0).set({
        left: 1,
        top: 1
    });
    canvas.add(oImg).setActiveObject(oImg);
    canvas.renderAll();
});

這是JSFiddle 鏈接。

但是，如果我使用本地 url 引用，例如“images/myfile.jpeg”，它就可以正常工作。

可能有什么問題？ 謝謝你的幫助。

編輯：顯然這是一個 Firefox 錯誤。 已在 Chrome、Safair（適用於 Windows）和 IE ( :o ) 上進行測試

Answer 1

不確定這是否是您的確切問題，但在這篇文章中描述的問題是，使用來自外國網站的圖像會引發安全標志，不允許您使用它。 帖子中有更詳細的描述。

Answer 2

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('http://img3.wikia.nocookie.net/__cb20120402213942/masseffect/images/5/57/Small_Arms_Codex_Image.jpg', function(oImg) {

  oImg.scale(70000).set({
    left: 100,
    top: 100
  });

  canvas.add(oImg).setActiveObject(oImg);
  canvas.renderAll();
});