使用fabric.fromUrl时出现CORS问题

Question

我正在将fabric.js与angularjs应用程序集成在一起。 我正在从第三方来源（我无法控制）中提取图像。 我希望对其执行一些操作，例如：过滤，添加到画布，存储到画布以及从画布重新加载。

我正在使用带有交叉源的fabric fromurl调用，但是每次都失败。

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
    canvas1.add(img.set({
        left: 50,
        top: 50,
        angle: 30
    }));
    console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());
}, {
    crossOrigin: 'Anonymous'
});

小提琴

我做错了什么吗？

Answer 1

crossOrigin将仅请求通过CORS使用资源的权限，但服务器可以拒绝它，以防万一还会使图像加载全部失败。

唯一的解决方法是将映像上载到您自己的服务器（不需要crossOrigin ）或使用CORS代理（仍然需要crossOrigin ）或将映像上载到允许使用CORS的主机（imgur.com和dropbox.com几个例子）。 所有这些变通办法可能涉及用户权限问题。

Answer 2

Fabricjs代码段

 fabric.util.loadImage(img.src, function(any image url on website) {
    var object = new fabric.Image(any image url on website);
    object.set({
      id: 'bg',
      width: 100,
      height: 100,
      left: 20,
      top: 30
    });
    canvas.add(object);

  }, null, {
    crossOrigin: 'anonymous'
  })

避免fabricjs中的Cors问题

1：使用fabric.util.loadImage而不是fabric.Image.fromURL

2： fabric.util.loadImage 3个参数，第三个arg应该是crossOrigin: 'anonymous'像下面的代码

3：如果要在html中显示图像，请在html的图像标签中使用crossOrigin = 'anonymous'

4：如果您的网站不安全并且想要从安全网站中提取图片，则会出现cors错误

例如： https vs http

• 您在localhost:7000 （不安全），并且想从https://hello.com/image2.png提取图像（安全）

• 您在http://www.hiee.com并希望从https://hello.com/image2.png提取图像（安全）

5：如果仍然出现cors问题，则要从中拉出图像的服务器也应发送带有图像"Access-Control-Allow-Origin", "*"标头。如何检出这些标头，请在浏览器中打开图像标签，然后firebug-> network，请参阅标题

6： 启用/禁用浏览器中的网络安全

注意：这是仅适用于本地环境的临时解决方案，但是当您从其他网络的浏览器访问相同的url时，CORS问题将再次出现。

Answer 3

尝试这个：

 fabric.Image.fromURL('http://img.fkcdn.com/image/dining-chair/b/g/y/fidcbennywncsach-1-cedar-pine-devdar-home-cherry-white-original-imae9fsfbkxrgebt.jpeg', function (img) {
canvas1.add(img.set({
    left: 50,
    top: 50,
    angle: 30
}));
console.log('CORS enabled + crossOrigin property - DataURL: ', canvas1.toDataURL());}, null,{
crossOrigin: 'Anonymous'});

小提琴