前端的非同源图片下载
Posted yihuite-zch
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端的非同源图片下载相关的知识,希望对你有一定的参考价值。
由于再日常开发中,公司往往会有一个图片服务器。在要求前端实现图片下载时往往会有非同源的问题。
非同源使用download属性默认会预览而不是下载。
由于图片服务器往往是允许跨域的,所以我们在这里用ajax get请求的方式,获取图片blob文件,再由
window.URL.createObjectURL
(专门用来将blob或者file读取成一个url的可被img,video,audio 识别显示出来的url)
1 function downloadImg(src,name) 2 var x=new XMLHttpRequest();
//禁止浏览器缓存;否则会报跨域的错误 3 x.open("GET", src+‘?t=‘+new Date().getTime(), true); 4 x.responseType = ‘blob‘; 5 x.onload=function(e) 6 var url = window.URL.createObjectURL(x.response) 7 var a = document.createElement(‘a‘); 8 a.href = url 9 a.download = name 10 a.click() 11 12 x.send(); 13
<a href="javascript:;" id="download" onclick=‘downloadImg(url,name)‘>下载</a>
以上是关于前端的非同源图片下载的主要内容,如果未能解决你的问题,请参考以下文章