java上传图片压缩包(js实现多张图片打包成zip)
类别:编程学习 浏览量:2814
时间:2022-01-28 01:28:52 java上传图片压缩包
js实现多张图片打包成zip目录
- 1、引入文件
- 2、html页面
- 3、主要代码
- 4、优化图片转base64的流程,提高zip的打包速度
- 5、再优化,通过axios把图片转成base64
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<button onclick="packageImages()">下载zip</button><span id="status"></span>
function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg for (var i = 0; i < 1; i++) { imgsSrc.push('https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg') } var imgBase64 = [] //base64图片 var imageSuffix = [] //图片后缀 var zip = new JSZip() zip.file('readme.txt', '案件详情资料\n') var img = zip.folder('images') for (var i = 0; i < imgsSrc.length; i++) { var suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.')) imageSuffix.push(suffix) getBase64(imgsSrc[i]).then( function (base64) { console.log(base64) imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")) // 当所有图片转成base64执行图片压缩 if (imgsSrc.length == imgBase64.length) { for (var i = 0; i < imgsSrc.length; i++) { // 文件名 数据 img.file(i + imageSuffix[i], imgBase64[i], { base64: true, }) } zip.generateAsync({ type: 'blob' }).then(function (content) { console.log(1) // see FileSaver.js saveAs(content, 'images.zip') $('#status').text('处理完成。。。。。') }) } }, function (err) { console.log(err) //打印异常信息 } ) } } //传入图片路径,返回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'] } }
function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg for (var i = 0; i < 1; i++) { imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg') } var imgBase64 = [] //base64图片 var imageSuffix = [] //图片后缀 var zip = new JSZip() zip.file('readme.txt', '案件详情资料\n') var img = zip.folder('images') for (var i = 0; i < imgsSrc.length; i++) { var suffix = imgsSrc[i].substring(imgsSrc[i].lastIndexOf('.')) imageSuffix.push(suffix) getBase64(imgsSrc[i], function (base64) { imgBase64.push(base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "")) if (imgsSrc.length == imgBase64.length) { for (var i = 0; i < imgsSrc.length; i++) { // 文件名 数据 img.file(i + imageSuffix[i], imgBase64[i], { base64: true, }) } zip.generateAsync({ type: 'blob' }).then(function (content) { console.log(1) // see FileSaver.js saveAs(content, 'images.zip') $('#status').text('处理完成。。。。。') }) } }) } } function getBase64(img, callback) { fetch(img).then( res => 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);//如果是转文字,第二个参数可以使用编码 }) }
function packageImages() { $('#status').text('处理中。。。。。') var imgsSrc = [] // https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg // https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg for (var i = 0; i < 100; i++) { imgsSrc.push('https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg') } 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') == -1) { // file_name = file_name + '.png' // } await zip.file(idx + '.png', 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的资料请关注开心学习网其它相关文章!
您可能感兴趣
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- js实现继承的五种(JavaScript继承的三种方法实例)
- nodejs游戏服务端框架(如何写Node.JS版本小游戏)
- extjs table布局
- next js上线(Next.js入门使用教程)
- dedecms中的有些功能如何修改(织梦DEDECMS中用JS方式调用评论总数的技巧)
- js对日期加减指定天、时、分、秒
- js的三种使用方法(JS带你深入领略Proxy的世界)
- js轮播图片(JS实现简单图片轮播效果)
- php验证码图解(php/JS实现的生成随机密码验证码功能示例)
- JS让打开的窗口居中
- chrome调试js
- js三级联动列表(基于JavaScript实现年月日三级联动)
- js编写一个数组去重的方法(JS实现数组过滤从简单到多条件筛选)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- MVC JsonResult的用法
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
- 网红直播可以赚很多钱吗(网红直播可以赚很多钱吗)
- 今天是什么日子(今天是什么日子有什么特殊意义吗)
- 这里输入关键词(怎么输入关键词搜索)
热门推荐
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- dedecms如何建站(多端全媒体建站系统DEDECMS V6全新发布)
- python随机生成时间戳(python时间序列按频率生成日期的方法)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- docker日志挂载(docker run -v 挂载数据卷异常,容器状态一直是restarting的解决)
- linux模糊删除多个文件(Linux删除文件不同方法效率对比)
- 云服务硬盘挂载有几种方法(腾讯云 阿里云 挂载硬盘方法数据盘)
- css按钮样式实例(CSS使用classList实现两个按钮样式的切换)
- linux宝塔面板安装后怎么打开(Linux宝塔面板7.30推出文件外链分享功能)
- 查看mysql支持的字符集(不可忽视的MySQL字符集)