【Web前端问题】<img >加上crossOrigin="anonymous"之后导致图片无法显示
主要是想对跨域的图片进行裁剪保存
先是出现canvas.toDataURL()报错 网上资料说需要添加crossOrigin="anonymous"允许跨域
但加了之后图片就无法显示了 我又新建了一个页面发现 只要是<img>加了crossOrigin="anonymous"就都无法显示 求大神帮忙,谢谢。
回答:
你从哪里找的答案。误人子弟啊,Access-C...A...O...字段是服务端添加了才有的,"响应头中就会附加"是什么鬼,你加了crossOrigin="anonymous"是表明你想跨域获取这张图片,好用在canvas.toDataURL()上,但是服务端不一定同意啊,服务端添加了access...这个字段并且value是*或者你网站的域名才行,否则就认为你无权用,结果就是无法显示
参考:
http://stackoverflow.com/ques...
https://developer.mozilla.org...
https://developer.mozilla.org...
回答:
哇啊啊啊啊啊啊啊啊!!
多谢 @拾指相扣 回答评论下的 @吴观涛 大大提供的方法!!
image.src = url + '?time=' + new Date().valueOf();
简直曲线救国啊啊啊!!一次解决!
完整代码
let image = new Image() image.setAttribute('crossOrigin', 'anonymous')
image.src = url + '?time=' + new Date().valueOf();
let that = this;
image.onload = () => {
// ... do something
}
image.onerror = (err) => {
console.log(err)
};
回答:
跨域图片能正常裁剪(图片未转化成base64),应该满足三个条件:
- img元素中设置
crossorigin
属性 - 图片允许跨域,设置响应头
Access-Control-Allow-Origin
- 使用js方式请求图片资源, 需要避免使用缓存,设置url后加上时间戳,或者http头设置Cache-Control为no-cache
主要原因是:
- 如果使用跨域的资源画到canvas中,并且资源没有使用CORS去请求,canvas会被认为是被污染了, canvas可以正常展示,但是没办法使用
toDataURL()
或者toBlob()
导出数据,见Allowing cross-origin use of images and canvas。 所以通过在img标签上设置crossorigin
,启用CORS,属性值为anonymous
,在CORS请求时不会发送认证信息,见HTML attribute: crossorigin。 - 在启用CORS请求跨域资源时,资源必须允许跨域,才能正常返回,最简单的方式设置响应头
Access-Control-Allow-Origin
- 图片已经通过img标签加载过,浏览器默认会缓存下来,下次使用js方式再去请求,直接返回缓存的图片,如果缓存中的图片不是通过CORS请求或者响应头中不存在
Access-Control-Allow-Origin
,都会导致报错。
回答:
canvas无法对跨域的图片进行操作,楼主想要的裁剪保存功能如果在纯前端实现必须使用canvas。所以楼主必须要开启允许跨域,其中,除了服务端要允许当前页面允许跨域之外,楼主执行canvas操作前也要开启跨域。
var img=new Image();img.crossOrigin="anonymous";
img.src='//';
ctx.drawImage(img, 0, 0, img.width, img.height);
回答:
我目前没弄懂 但是发现只要把代码放到服务器上就不报错了
回答:
要服务器和img同时设置 一起 还有一招上使用fileReader和url.createObjectUrl
回答:
你的图片是不是https的呀,我这下载http的就报跨域,https就能下载,地址也是http
以上是 【Web前端问题】<img >加上crossOrigin="anonymous"之后导致图片无法显示 的全部内容, 来源链接: utcz.com/a/144182.html