js保存图片至本地
第一种方法
downloadIamge(imgSrc, fileName) { // imgSrc 为图片链接路径
// 必须同源才能下载
var alink = document.createElement("a");
alink.href = imgSrc;
alink.download = fileName; //fileName保存提示中用作预先填写的文件名
alink.click();
}
第二种方法
downloadIamge:function(imgSrc, fileName) { //图片地址和图片默认名称
let image = new Image();
image.src = imgSrc;
// 解决跨域 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 = fileName || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
},
第三种方法
downloadFile(fileUrl) {
const a = document.createElement('a')
// let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL
const url = fileUrl // 完整的url则直接使用
// 这里是将url转成blob地址，
fetch(url) // 跨域时会报错
.then(res => res.blob())
.then(blob => { // 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob)
console.log(a.href)
a.download = binding.value.name || '' // 下载文件的名字
// a.download = url.split('/')[url.split('/').length -1] // // 下载文件的名字
document.body.appendChild(a)
a.click()
//在资源下载完成后 清除 占用的缓存资源
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
})
}
第四种方法
function savePic(){
var img = document.getElementById('imgId');
var imgSrc = img.src; // 文件或图片的url地址
savePicture(imgSrc);
}
function savePicture(url){
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob' ; //arraybuffer也可以
xhr.ontimeout = ()=>{};
xhr.onreadystatechange=()=>{
if(xhr.readyState=== XMLHttpRequest.DONE) { // 4 DONE 下载操作已完成
if(xhr.status =200) { //status 200 代表一个成功的请求
};
};
}};
xhr.onprogress = function () {
console.log('LOADING', xhr.status);
};
xhr.onload = function () {
console.log('DONE', xhr.status);
let blob = xhr.response; // response 属性返回响应的正文，取决于 responseType 属性。
// 下载完成，创建一个a标签用于下载
let a = document.createElement("a");
a.download = imgSrc.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0]; //保存提示中用作预先填写的文件名
a.href = URL.createObjectURL(blob) ;
document.body.appendChild(a);
a.click();
// let e = document.createEvent('MouseEvents');
// e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
// a.dispatchEvent(e);
// 在资源下载完成后 清除占用的缓存资源
setTimeout(function(){
URL.revokeObjectURL(blob);
document.body.removeChild(a);
}, 200)
};
xhr.send(null); //XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null
}
参考：
XMLHttpRequest() - Web API 接口参考 | MDN
参考地址：
-
MDN a标签的说明：<a> - HTML（超文本标记语言） | MDN
-
MDN 关于toDataURL 说明: HTMLCanvasElement.toDataURL() - Web API 接口参考 | MDN
js 通过 blob 类文件对象下载图片，修改图片保存的名字（兼容式写法）_时间飞逝子非鱼的博客-CSDN博客_blob 图片下载