利用HTML与jQuery的离线本地图片批量压缩并自动打包工具

在日常生活或工作中，常常会处理到各种图片，而原图往往会占用很大内存。特别是公众号文章的推送，新媒体运营等。如公众号图文对图片的质量往往要求不是太高，如果上传很多张图片的话，就会占用很长的时间去上传图片，从而造成一直等网速，求宽带，工作效率差的情况。

所以就抽出了一点时间，写了个批量压缩的小工具

可以点击添加图片一次性添加多张图片，也可以直接选中图片拖进框内进行压缩 

上传完成后，会保存成一个zip包存到本地。800M压缩时间大约30秒左右。

下面是部分源码。全部的代码在github：https://github.com/qupengkun/resize_image github源码 或码云：码云源码

 

$(function() {
				$('.resize').fileinput({
					language: 'zh',
					uploadUrl: location.pathname + 'upload/',
					showCaption: false,
					showUpload: false,
					showRemove: false,
					showClose: false,
					layoutTemplates: {
						actionDelete: '',
						actionUpload: ''
					},
					browseClass: 'btn btn-primary',
					maxFileCount: 50, //TODO 表示允许同时上传的最大文件个数
					allowedFileExtensions: ['jpg', 'gif', 'png'] //接收的文件后缀
				}).on('filebatchselected', function(event, files1) { //选中文件事件
					if(!files1.length) return; // this.files获取上传图片
					var files = Array.prototype.slice.call(files1); // 转换为数组
					var i = 1;
					var sortArr = [];
					files.forEach(function(file, i) { // 图片文件循环
						if(!/\/(?:jpeg|png|gif)/i.test(file.type)) return; // file.type获取图片格式
						var reader = new FileReader(); // FileReader
						var li = document.createElement("li"); // 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
						var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB"; //file.size图片大小，~~转换数字整形
						li.innerHTML = '
';

						$(".img-list").prepend($(li)); //图片显示页面上
						reader.onload = function() { //读取操作成功
							var result = this.result; //文件内容，读取操作完成后，此属性才有效
							var img = new Image(); //Image对象
							img.src = result;
							$(li).find('img').attr('src', result);
							//如果图片大小小于100kb，则直接上传
							if(result.length <= 100 * 1024) { //图片小于100kb直接上传
								img = null;
								// upload(result, file.type, $(li));
								return;
							}
							if(img.complete) { //图像在浏览器加载完成
								callback();
							} else {
								img.onload = callback; //当图像装载完毕
							}

							function callback() {
								var data = compress(img, file.type); //进行压缩操作

								imgOldNames.push(file.name);
								imgBase64.push(data);
								sortArr.push(i);
								//							
								//							//最后一个时
								if(sortArr.length == files.length) {
									//packageZip(imgBase64);
									saveImage(imgBase64, imgOldNames);
								}

								img = null;
							}
						};
						reader.readAsDataURL(file); //读取file对象
						i++;
					})
				});
			});