使用fabric.fromUrl时出现CORS问题

CORS issue when using fabric.fromUrl

本文关键字：CORS 问题 fabric fromUrl 使用      更新时间：2023-09-26

我正在将fabricjs与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'
});

Fiddle

我做错了什么吗？

crossOrigin只会请求通过CORS使用资源的权限，但服务器可以拒绝，这也会导致加载图像失败。

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

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个参数，第三个参数应该是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问题，那么你从中提取图像的服务器也应该发送带有图像"Access-Control-Allow-Origin", "*"的这些标题。如何签出这些标题，是在浏览器选项卡中打开图像，然后打开firebug->网络，请参阅标题

6:在类似的浏览器中启用/禁用网络安全

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

试试这个：

 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

相关文章：