使用外部 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();
});