使用外部 url 时 fabric.js fabric.Image.fromURL 会抛出错误答案

【问题标题】：fabric.js fabric.Image.fromURL throws error when using external url使用外部 url 时 fabric.js fabric.Image.fromURL 会抛出错误
【发布时间】：2014-06-25 05:47:37
【问题描述】：

我一直在尝试使用 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 Link。

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

可能有什么问题？感谢您的帮助。

编辑：显然这是一个 Firefox 错误。已在 Chrome、Safair（适用于 Windows）和 IE (:o) 上测试过

【问题讨论】：

您找到解决方案了吗？我也有同样的问题。

标签： javascript fabricjs

【解决方案1】：

不确定这是否是您的确切问题，但there is the issue described in this post 使用来自外国网站的图像会引发安全标志，不允许您使用它。帖子中有更详细的描述。

【讨论】：

【解决方案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();
});

【讨论】：