使用fabric.fromUrl时出现CORS问题 [英] CORS issue when using fabric.fromUrl

问题描述

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

I am integrating fabricjs with angularjs application. I am pulling an image from a third party source (which is not in my control). I wish to perform some actions on it like: filtering, adding to canvas, storing to canvas and reloading from canvas.

我正在使用带有crossorigin的fabric fromurl调用但它失败了每次。

I am using fabric fromurl call with crossorigin but it fails everytime.

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

小提琴

我有什么问题吗？

推荐答案

crossOrigin 只有请求权限才能使用CORS上的资源，但服务器可以拒绝它，以防万一还可以使图像加载失败。

crossOrigin will only request permission to use the resource over CORS but the server can deny it, which in case will also make loading the image fail all together.

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

The only way around is to upload the image to your own server (no crossOrigin needed) or to use a CORS proxy (crossOrigin still needed) or to upload the image to a host that allows CORS usage (imgur.com and dropbox.com being a couple of examples). All these workaround may involve user right issues.

这篇关于使用fabric.fromUrl时出现CORS问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！