使用fabric.fromUrl时CORS问题
使用fabric.fromUrl时CORS问题
提问于 2016-04-16 09:16:11
我是集成制造和天使的应用程序。我正在从第三方来源(这不在我的控制范围内)获取一个图像。我希望对它执行一些操作，例如:过滤、添加到画布、存储到画布和从画布重新加载。
我使用的面料，弗罗穆尔调用与交叉，但它每次都失败。
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'
});我做错什么了吗？
Stack Overflow用户
发布于 2017-02-01 14:36:20
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->网络，请参见标头。
注意:这将是只适用于本地环境的临时解决方案，但是当您从其他网络的浏览器访问相同的url时，CORS问题将再次出现。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36662320
复制相关文章
相似问题
腾讯云开发者
