问使用fabric.fromUrl时CORS问题

EN

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'
  })

避免制造in 中的Cors问题

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

2：fabric.util.loadImage采用3个参数，第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", "*".Well如何签出这些标头，是在浏览器选项卡中打开的图像，然后是firebug->网络，请参见标头。

6：在浏览器中启用/禁用web安全，如

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

小提琴