该文章主要介绍从后端获取到流文件格式的图片,生成图片,并完成下载图片到本地
1. 生成流文件图片
在我们请求获取流文件图片时,需要注意的点是一定要添加请求头responseType: ‘blob’,不然图片会加载失败。
getIamge(){
let data = {
}
axios({
method: 'post',
url: 'url/getEwm', // 请求地址
data: data, //请求参数
responseType: 'blob'
}).then(res => {
const blob = new Blob([data.data], {
type: 'application/vnd.ms-excel',
crossOrigin: 'Anonymous'
})
var href = window.URL.createObjectURL(blob);
this.imgSrc = href // 获取到的图片路径
})
}
2. 下载图片到本地
图片加载成功以后,完成下载图片到本地
// imgsrc:图片路径;name:图片名称 ;
downloadIamge(imgsrc, name) {
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", {
bubbles: true,
cancelable: true,
view: window
}); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},