前端img不显示服务器图片,【前端】<img >加上crossOrigin=”anonymous”之后导致图片无法显示...

主要是想对跨域的图片进行裁剪保存

先是出现canvas.toDataURL()报错 网上资料说需要添加crossOrigin=”anonymous”允许跨域

但加了之后图片就无法显示了 我又新建了一个页面发现 只要是加了crossOrigin=”anonymous”就都无法显示 求大神帮忙，谢谢。

回答

你从哪里找的答案。误人子弟啊，Access-C…A…O…字段是服务端添加了才有的，”响应头中就会附加”是什么鬼，你加了crossOrigin=”anonymous”是表明你想跨域获取这张图片，好用在canvas.toDataURL()上，但是服务端不一定同意啊，服务端添加了access…这个字段并且value是*或者你网站的域名才行，否则就认为你无权用，结果就是无法显示

参考：

http://stackoverflow.com/ques…

https://developer.mozilla.org…

https://developer.mozilla.org…

跨域图片能正常裁剪(图片未转化成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，都会导致报错。

哇啊啊啊啊啊啊啊啊！！

多谢 @拾指相扣 回答评论下的 @吴观涛 大大提供的方法！！

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)

};

canvas无法对跨域的图片进行操作，楼主想要的裁剪保存功能如果在纯前端实现必须使用canvas。所以楼主必须要开启允许跨域，其中，除了服务端要允许当前页面允许跨域之外，楼主执行canvas操作前也要开启跨域。

var img=new Image();

img.crossOrigin="anonymous";

img.src='https://';

ctx.drawImage(img, 0, 0, img.width, img.height);

我目前没弄懂 但是发现只要把代码放到服务器上就不报错了

要服务器和img同时设置 一起 还有一招上使用fileReader和url.createObjectUrl

你的图片是不是https的呀，我这下载http的就报跨域，https就能下载，地址也是http