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 Link。

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

可能出现什么问题？谢谢你的帮助。

编辑：显然这是一个firefox错误。测试了Chrome，Safair（用于Windows）和IE（：o）

Answer 1

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

Answer 2

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

fabric.js fabric.Image.fromURL在使用外部URL时抛出错误

2 个答案: