javascript - 使用 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 是两个例子)。所有这些解决方法都可能涉及用户权限问题。