使用 fabric.fromUrl 时的 CORS 问题

Question

我正在将 fabricjs 与 angularjs 应用程序集成。我正在从第三方来源（不在我的控制范围内）中提取图像。我希望对其执行一些操作，例如：过滤、添加到 canvas、存储到 canvas 并从 canvas.

重新加载

我正在使用带有 crossorigin 的 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'
});

Fiddle

我做错了什么吗？

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 个参数，第 3 个参数应该是 crossOrigin: 'anonymous' 就像下面的代码

3 : 如果您在 html 中显示图片，请在 html

中的图片标签中使用 crossOrigin = 'anonymous'

4 : 如果 你的网站不安全 并且你想从安全的 中提取图像，将会出现 cors 错误网站

例如：https 与 http

你在 localhost:7000（不安全）并且想从 https://hello.com/image2.png（安全）
你在 http://www.hiee.com 并且想从 https://hello.com/image2.png（安全）

5：如果你仍然有 cors 问题，那么你从中提取图像的服务器也应该发送这些 headers 和图像 "Access-Control-Allow-Origin", "*"。那么如何检查这些 headers，在浏览器选项卡中打开图像然后 firebug->network ，请参阅 headers

6 : enable / disable web security in browser like

注意：这将是仅适用于本地环境的临时解决方案，但是当您从其他网络中的浏览器访问相同的 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'});

Fiddle

使用 fabric.fromUrl 时的 CORS 问题

CORS issue when using fabric.fromUrl

javascript

cors

fabricjs