js实现多张图片打包成zip

图片下载是前端常见的需求,如果一张一张下载未免太影响体验了,于是写下了这个多张图片打包成zip的demo

1、引入文件

 

2、html页面

 

3、主要代码

 function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg-600 // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg-600 for (var i = 0; i <1; i++) { imgsSrc.push('https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg-600_240x240.jpg-600') } var imgBase64 = [] //base64图片 var imageSuffix = [] //图片后缀 var zip = new JSZip() zip.file('readme.txt', '案件详情资料\n') var img = zip.folder('images') for (var i = 0; i 

4、优化图片转base64的流程,提高zip的打包速度

 function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg-600 // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg-600 for (var i = 0; i <1; i++) { imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg-600') } var imgBase64 = [] //base64图片 var imageSuffix = [] //图片后缀 var zip = new JSZip() zip.file('readme.txt', '案件详情资料\n') var img = zip.folder('images') for (var i = 0; i  res.blob()) .then(res => { let fr = new FileReader();//https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader fr.onload = function (e) { callback(e.target.result) }; fr.onerror = function () { console.log('读取错误!') }; fr.readAsDataURL(res);//如果是转文字,第二个参数可以使用编码 }) } 

5、再优化,通过axios把图片转成base64

 function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg-600 // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg-600 for (var i = 0; i <100; i++) { imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg-600') } handleBatchDownload(imgsSrc) } getFile = (url) => { return new Promise((resolve, reject) => { axios({ method: 'get', url, responseType: 'arraybuffer' }).then(data => { resolve(data.data) }).catch(error => { reject(error.toString()) }) }) }; // 批量下载 handleBatchDownload = async (selectImgList) => { const data = selectImgList; const zip = new JSZip() const promises = [] await data.forEach((item, idx) => { // console.log(item, idx) const promise = this.getFile(item).then(async (data) => { // 下载文件, 并存成ArrayBuffer对象 const arr_name = item.split("/"); let file_name = arr_name[arr_name.length - 1] // 获取文件名 // if (file_name.indexOf('.png-600') == -1) { //    file_name = file_name + '.png-600' // } await zip.file(idx + '.png-600', data, { binary: true }) // 逐个添加文件 }) promises.push(promise) }) Promise.all(promises).then(() => { zip.generateAsync({ type: "blob" }).then(content => { // 生成二进制流 saveAs(content, "photo.zip") // 利用file-saver保存文件 $('#status').text('处理完成。。。。。') }) }) }; 

以上就是js实现多张图片打包成zip的详细内容,更多关于js 图片打包成zip的资料请关注html中文网其它相关文章!

以上就是js实现多张图片打包成zip的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » JavaScript 教程