使用外部 url 时，fabric.js fabric.Image.fromURL 抛出错误

Question

I've been trying to add images to my canvas using fabric.js' fabric.Image.fromURL whereby the image is located on another server.

The image gets added and loaded fine, but once I start moving it or resizing it, it disappears. Firebug then displays the vicinity of the error in the fabric.js script to be somewhere near "fabric.Image is already defined".

Here's my code:

<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();
});

and here's the JSFiddle Link .

However, if I use local url reference such as "images/myfile.jpeg", it works ok.

What could possibly be wrong? Thanks for any help.

EDIT: Apparently this is a firefox bug. Tested working on Chrome, Safair (for windows) and IE ( :o )

Answer 1

Not sure if this is your exact issue but there is the issue described in this post where using images from foreign websites raises a security flag, not letting you use it. It is described in better detail in the post.

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();
});