实例介绍
【实例简介】
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>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论