<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- 通过<a>链接来实现图片下载 -->
<a href="img/image1.jpg" download="down">
<img src="img/image1.jpg" alt="" width="200px" height="100px">
</a>
<!-- 通过JS来触发<a>链接来实现图片下载 -->
<img id="down" src="img/image1.jpg" alt="" width="200px" height="100px">
<button class="downloadBtn" type="button" onclick="downloadImg()">下载图片</button>
<!-- 批量下载图片 -->
<script src="http://stuk.github.io/jszip/test/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://stuk.github.io/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<img src="img/image1.jpg" alt="" width="200px" height="100px">
<img src="img/image2.jpg" alt="" width="200px" height="100px">
<button onclick="packageImages()">packageImages</button><span id="status"></span>
</body>
<script>
//单个下载
function downloadImg(){
var img = document.getElementById('down'); // 获取要下载的图片
var url = img.src; // 获取图片地址
var a = document.createElement('a'); // 创建一个a节点插入的document
var event = new MouseEvent('click') // 模拟鼠标click点击事件
a.download = 'image' // 设置a节点的download属性值
a.href = url; // 将图片的src赋值给a节点的href
a.dispatchEvent(event) // 触发鼠标点击事件
}
//批量下载
function packageImages() {
$('#status').text('处理中。。。。。');
var imgs = $('img');
var imgsSrc = [];
var imgBase64 = [];
var imageSuffix = [];//图片后缀
var zip = new JSZip();
// zip.file("readme.txt", "案件详情资料\n");
var img = zip.folder("images");
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].getAttribute("src");
var suffix = src.substring(src.lastIndexOf("."));
imageSuffix.push(suffix);
getBase64(imgs[i].getAttribute("src"))
.then(function (base64) {
imgBase64.push(base64.split(",")[1]);
//console.log(base64);//处理成功打印在控制台
}, function (err) {
console.log(err);//打印异常信息
});
}
function tt() {
setTimeout(function () {
if (imgs.length == imgBase64.length) {
for (var i = 0; i < imgs.length; i++) {
img.file(i + imageSuffix[i], imgBase64[i], { base64: true });
}
zip.generateAsync({ type: "blob" }).then(function (content) {
// see FileSaver.js
saveAs(content, "images.zip");
});
$('#status').text('处理完成。。。。。');
} else {
//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
$('#status').text('已完成：' + imgBase64.length + '/' + imgs.length);
tt();
}
}, 100);
}
tt();
}
//传入图片路径，返回base64
function getBase64(img) {
function getBase64Image(img, width, height) {//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = img;
var deferred = $.Deferred();
if (img) {
image.onload = function () {
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
</script>
</html>
