基本信息
源码名称：本地图片批量压缩并自动打包工具
源码大小：0.64M
文件格式：.zip
开发语言：js
更新时间：2021-05-30
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
JS 本地图片批量压缩并自动打包工具
$(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 = '<div class="img"><img src=""/></div>';
$(".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 ;
})
});
});
</script>
<script>
var imgBase64 = [];
var imgOldNames = [];
$("#choose").change(function() { // 上传事件触发
if(!this.files.length) return; // this.files获取上传图片
var files = Array.prototype.slice.call(this.files); // 转换为数组
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 = '<div class="img"><img src=""/></div>';
$(".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 ;
})
});
/**
* 图片压缩
* @param {Object} img 图片
* @param {Object} type 图片类型
* @param {Object} quality 图片质量0-1
*/
function compress(img, type, quality) {
var canvas = document.createElement("canvas"); //新建画布
var ctx = canvas.getContext('2d'); //指定二维绘图
var initSize = img.src.length;
var width = img.width;
var height = img.height;
var ratio;
if((ratio = width * height / 400000) > 1) { //图片大小大于40w像素则进行压缩
ratio = Math.sqrt(ratio); //返回正平方根double值
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
ctx.fillStyle = "#fff"; //铺底色
ctx.fillRect(0, 0, canvas.width, canvas.height); //绘制“被填充”矩形
//如果图片像素大于100万则使用瓦片绘制
var count;
if((count = width * height / 100000) > 1) {
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
count = ~~(Math.sqrt(count) 1); //计算要分成多少块瓦片
//计算每块瓦片的宽和高
var nw = ~~(width / count);
var nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for(var i = 0; i < count; i ) {
for(var j = 0; j < count; j ) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//类型，默认jpg
type = type || 'image/jpeg';
//TODO 图片质量，可选0-1
quality = quality || 0.92;
var ndata = canvas.toDataURL(type, quality);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
ndata = ndata.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
return ndata;
}
/**
* 将某个canvas保存为图片
* @param canvasObjToUri base64图片
* @param imgOldNames 图片原名称 如 1.png
* @param quality 图片质量，可选0-1
*/
function saveImage(canvasObjToUri, imgOldNames, quality) {
if(!canvasObjToUri) {
return;
}
var zip = new JSZip();
//如需要加入文档，可放开此注释
//zip.file("readme.txt", "压缩后图片\n");
var img = zip.folder("images");
for(var index in canvasObjToUri) {
img.file(imgOldNames[index], canvasObjToUri[index], {
base64: true
});
}
zip.generateAsync({
type: "blob"
}).then(function(content) {
// see FileSaver.js
saveAs(content, "images.zip");
});
}
</script>