javascript – 使用fabric.fromUrl时的CORS问题

我正在将fabricjs与angularjs应用程序集成.我从第三方来源(不在我的控制范围内)中提取图像.我希望对它执行一些操作,例如：过滤,添加到画布,存储到画布以及从画布重新加载.

我正在使用带有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

有什么我做错了吗？

解决方法:

crossOrigin只会请求通过CORS使用资源的权限,但服务器可以拒绝它,以防万一也会使图像加载失败.

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

标签：javascript,cors,fabricjs
来源： https://codeday.me/bug/20191007/1865356.html