前端下载不同源图片方法

记录前端下载不同源图片方法

前台js部分
function down() {
let url = 请求后台地址+拼接参数;
let xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);
xhr.responseType = “blob”;
xhr.setRequestHeader(“client_type”, “DESKTOP_WEB”);
xhr.onload = function() {
if (this.status == 200) {
let blob = this.response;
let img = document.createElement(“img”);
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
};
img.src = window.URL.createObjectURL(blob);
downloadWBIamge(img.src)
}
};
xhr.send();
}
//图片下载
function downloadWBIamge(imgSrc){ // 下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute(‘crossOrigin’, ‘anonymous’);
image.onload = function () {
var canvas = document.createElement(‘canvas’);
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext(‘2d’);
context.drawImage(image, 0, 0, image.width, image.height);
var url = canvas.toDataURL(‘image/png’) ;// 得到图片的base64编码数据
var a = document.createElement(‘a’); // 生成一个a元素
var event = new MouseEvent(‘click’) ;// 创建一个单击事件
a.download = “” ;// 设置图片名称
a.href = url ;// 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = imgSrc
}

后台部分action
public void downloadImage() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
String imgPath = request.getParameter(“请求路径中拼接的参数名”);
BufferedInputStream inputStream = new BufferedInputStream(new FileInputStream(new File(imgPath)));
//3下载名称
String filename = “”;
filename = System.currentTimeMillis()+".png";
//4设置下载头
response.addHeader(“Content-Disposition”, “attachment;filename=” + filename);
//5设置文件contentType类型
response.setContentType(“multipart/form-data”);
//6输出流
BufferedOutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
IOUtils.copy(inputStream, outputStream);
int len = 0;
while ((len = inputStream.read()) != -1) {
outputStream.write(len);
}
outputStream.close();
inputStream.close();
}