需要下载n张图片，现在可以弹出N个下载框，但是只有第一个下载框起作用，其他的点了也不会下载，如果我把下载前提示关闭，即可下载全部，这是为什么，怎么改动才可以，即使有提示框也能下载全部图片呢
var downloadIamge = function (imgsrc, name) { //下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "pig"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
for (i = 0; i < src.length; i++) {
url = src[i];
downloadIamge(url);
}
我试了一下，现在是能下载全部图片的啊，只不过你的第二个参数图片名name都是pig的话就会被覆盖，改成 downloadIamge(url,'img'+i);
是否请求的url是一样的，如果一样，浏览器不会再次发起请求，需要加个随机数。
你的代码测试了，可以正常下载图片，但是需要在浏览器（谷歌浏览器）点击允许多文件下载，点击禁止或者不操作，只能下载第一个图片，点击允许会下载所有图片。可能是浏览器不一样，你的也许是弹出多个下载框。
如果你想要跳过浏览器的这个提示，可以使用打包下载。这样不会触发浏览器的多文件下载。
打包下载需要用到jszip.js和FileSaver.js，
https://github.com/Stuk/jszip/releases/tag/v3.7.1
https://github.com/eligrey/FileSaver.js/releases/tag/v2.0.4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="js/jszip.min.js"></script>
<script type="text/javascript" src="js/FileSaver.min.js"></script>
</head>
<body>
<button onclick="download()">test-download</button>
<button onclick="zipDownload()">zip-download</button>
<script type="text/javascript">
var downloadIamge = function (imgsrc, name) { //下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "pig"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
}
function zipDownload() {
var src = new Array("https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF", "https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF", "https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF");
//打包下载
downloadZipImage(src, '', 'images-zip');
}
function download() {
var src = new Array("https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF", "https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF", "https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF");
//循环下载
for (i = 0; i < src.length; i++) {
url = src[i];
downloadIamge(url,'测试图片' + (i + 1));
}
}
/**
* 下载压缩图片
* @param {any[]} imgArr 图片合集
* @param {string} imgKey 如果不是单纯的图片路径 需要传入路径的key
*/
function downloadZipImage(imgArr, imgKey = '', downloadName = 'img') {
if (!imgArr || !imgArr.length) {
return;
}
const zip = new JSZip();
// 创建images文件夹
const imgFolder = zip.folder('images');
let index = 0; // 判断加载了几张图片的标识
for (let i = 0; i < imgArr.length; i++) {
const itemImg = imgKey ? imgArr[i][imgKey] : imgArr[i];
/**
* 如果是Base64就不需要再做异步处理了
*/
const Base64Img = getBase64(itemImg);
if (Base64Img['then']) {
Base64Img['then'](function (base64) {
setBase64Img(zip, imgFolder, base64, imgArr, index, downloadName);
index++;
}, function (err) {
console.log(err); //打印异常信息
});
} else {
setBase64Img(zip, imgFolder, Base64Img, imgArr, index, downloadName);
index++;
}
}
}
/**
* 将图片转换成base64 并返回路径
* @param img
* @param {number} width 调用时传入具体像素值，控制大小 ,不传则默认图像大小
* @param {number} height
* @returns {string}
*/
function getBase64Image(img, width = 0, height = 0) {
const canvas = document.createElement('canvas');
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
return dataURL;
}
/**
* 检查是不是Base64
* @param img
* @returns {boolean}
*/
function IsBase64(img) {
// jpg jpeg png gif
const _img = img.toLowerCase();
if (_img.endsWith('jpg') || _img.endsWith('jpeg') || _img.endsWith('png') || _img.endsWith('gif'))
return false;
return true;
}
/**
* 加载图片 加载成功后经图片返回
* @param img
* @returns {Promise<any>}
*/
function getBase64(img) {
let url = '';
if (IsBase64(img)) {
// 有一些数据 后台没有返回前缀
const _base64 = 'data:image/png;base64,';
if (img.startsWith(_base64)) {
url = img;
} else {
url = _base64 + img;
}
return url;
} else {
url = img;
const image = new Image();
image.crossOrigin = '*';
image.src = url;
return new Promise(function (resolve, reject) {
image.onload = function () {
resolve(getBase64Image(image)); //将base64传给done上传处理
}
});
}
}
/**
* 压缩图片
*/
function setBase64Img(zip, imgFolder, base64, imgArr, index, downloadName) {
base64 = base64.split('base64,')[1];
imgFolder.file(downloadName + '_' + index + '.png', base64, {
base64: true
});
if (index === imgArr.length - 1) {
zip.generateAsync({
type: 'blob'
}).then((blob) => {
saveAs(blob, downloadName + '.zip');
// getZipFiles(blob)
});
}
}
</script>
</body>
</html>