<!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", "案件详情资料 "); 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>
