<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>批量等比缩小图片</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>
<!--
$(document).ready(function(){
var picNum = 0;
var picTotal = 0;
$(document).on("click", "#BtnOk", function(){
picNum = 0;
n = 0;
if( $("#BtnCL").length > 0){
$(".Cbox_Ms").html('<span>请确定,再选择文件，执行!</span>');
return false;
}
$(".runStatus").remove();
$(".Cbox_Ms").empty();
var files = document.getElementById("soFiles").files;
var Lf = files.length;
picTotal = Lf;
if(Lf==0){$(".Cbox_Ms").html('<span>请选择要处理的文件!</span>');return false;}
$(".Cbox_tool").append('<span class="runStatus">正在处理中...</span>');
$(".Cbox_Ms").html('已处理完成图片:<span class="sNumber"> 1 </span> / ' + Lf +' 张<br><br>');
zipImg(files);
});
// 用计时器来缓冲，命令执行拼发
var n = 0;
function zipImg(files){
var fs = files;
var file = files[n];
readFile(file);
n = n + 1;
if( n == picTotal){ clearInterval();}
var T = 3000;
setInterval(function(){if( picNum == n){zipImg(fs)};},T);
//$("#preview").html('n:'+n+',picNum:'+picNum);
return false;
}
function readFile(file){
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var fileType=file.type;
var tarDir = $("#toFiles").val();//设置载入图片的尺寸
var imSize = $("#picSize").val();//设置载入图片的尺寸1080
var fname = tarDir.trim() + "/" + file.name;
var reader = new FileReader();
$(".runStatus").html("正在处理中 "+(n+1)+" ...");
reader.readAsDataURL(file);//转化成base64数据类型
reader.onerror = function(){
picNum = picNum + 1;
$(".Cbox_Ms").append("<span>["+ picNum +"] 文件:"+ fname+" , 类型:"+ fileType +" 图片损坏!</span><br>")
return false;
}
reader.onload = function(e){
drawToCanvas(this.result,fileType,fname,imSize);
reader.remove(reader.selectedIndex);
}
};
function drawToCanvas(imgData,fileType,fname,imSize){
var cvs = document.createElement('canvas');
var ctx = cvs.getContext('2d');
var img = new Image;
img.src = imgData;
//img.onerror = function(){alert("图片已经损坏!");}
img.onload = function(){//必须onload之后再画
var imgW = img.width;
var imgH = img.height;
var scale = 1;
if( imgW > imSize || imgH > imSize){ //制定最小边为1280只是示例，可以根据具体的要求去设定
if(imgW > imgH){
scale = imSize / imgH;
}else{
scale = imSize / imgW;
}
}
if( imgW < imSize || imgH < imSize){ scale = 1 } //主要有一边小于1280 图片就不作缩小
cvs.width = imgW*scale;
cvs.height = imgH*scale; //计算等比缩小后图片
ctx.drawImage(img, 0, 0, cvs.width, cvs.height);
var newImageData = cvs.toDataURL(fileType,0.9); //重新生成图片
var sendData = newImageData.replace("data:"+fileType+";base64,",'');
newImageData=null;
ctx = null;
cvs.remove(cvs.selectedIndex);
img.remove(img.selectedIndex);
$.post('save.php',{imgDt:sendData,fn:fname},function(data,status){
if(status == "success"){
picNum = picNum + 1;
$(".Cbox_Ms .sNumber").html(picNum);
$(".Cbox_Ms").append("["+ picNum +"] 文件:"+ data+" , 类型:"+ fileType +"<br>");
if( picNum == picTotal){
$(".Cbox_Ms").append("<br><span>图片处理完毕!</span>");
$(".runStatus").html("<span>共执行 "+picNum +" 项 , 图片处理完毕!</span>");
$(".runStatus").append('<a id="BtnCL">请确定完成</a>');
$("#BtnOk").css("display","none");
sendData = null;
}
$("#myImg").attr("src",data);
$(".Cbox_Ms").scrollTop($(".Cbox_Ms")[0].scrollHeight);
}else{
$(".Cbox_Ms").append("<br><span>文件:"+ data+" 保存失败!</span>");
}
})
}
};
$(document).on("change", "#soFiles", function(){
var files = document.getElementById("soFiles").files;
$(".Cbox_Ms").html("选择图片数:<span> " + files.length +" </span>张<br><br>");
$(".Cbox_Ms").scrollTop('0');
$(".runStatus").remove();
$("#myImg").attr("src","");
for (var i = 0; i < files.length ; i++) {
var file = files[i];
var reStr="";
reStr += "["+(i+1)+"] - 文件：" + file.name + " [";
reStr += "大小：" + file.size + "] ";
reStr += "类型：" + file.type + "<br>";
$(".Cbox_Ms").append(reStr);
}
});
$(document).on("click", "#BtnCL", function(){
window.location.reload();
});
})
-->
</script>
<style>
<!--
body{ background:#030; text-align:center;}
.CTite{ margin:50px auto;width:68%; font-size:36px;color:#F00;}
.Cbox{margin:0 auto;width:68%;height:auto; border:2px solid #999999; border-radius:5px; zoom:1px;}
.Cbox_tool{margin-left:0px;float:left; border:0px solid #9C0;width:66%;text-align:left; padding:10px;color:#9C0;line-height:26px; font-size:18px;}
.Cbox_tool a{ border:1px solid #9C0;border-radius:5px;padding:3px;color:#9C0; cursor:pointer;}
.Cbox_tool a:hover{ border:1px solid #FC0;Color:#FC0;}
.Cbox_tool input[type=file]{ opacity:0.6;background:#030;color:#9C0; border:0px; outline:none}
.Cbox_tool input[type=text]{ background:#030;color:#9C0; border:0px; border-bottom:1px solid #9C0; outline:none}
.Cbox_tool .runStatus{margin-left:20px;color:#F90;}
#BtnCL{margin-left:50px;}
.Cbox_img{float:right;border:0px;width:30%;height:200px;clear:right}
.Cbox_img img{margin-top:10px;margin-right:10px;width:168px;height:168px;border:0px;}
.Cbox_Ms{margin-left:20px;margin-bottom:20px;font-size:12px;color:#9C0;border:1px solid #9C0;width:80%;height:200px;padding:10px; overflow-y:auto;text-align:left;clear:left}
.Cbox_Ms .sNumber{color:#F90;}
.Cbox_Ms span{color:#F00;}
#preview{margin:0 auto;width:68%;height:auto;padding-top:30px;color:#FF0}
#preview img{margin-left:10px;width:50px;}
-->
</style>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<div class="CTite">HTML5 批量压缩图片处理</div>
<div class="Cbox">
<div class="Cbox_tool">
请选择文件路径:<br>
文件源 <input id="soFiles" name="soFiles" type="file" multiple accept="image/jpeg" ><br>
目标位置 <input id="toFiles" name="toFiles" type="text" value="zipImgs" size="10"><br>
缩小比例 <input id="picSize" type="text" value="1280" size="10"> 像素<br><br>
<a id="BtnOk" title="点击执行压缩处理">执行</a><br><br>
</div>
<div class="Cbox_img"><img id="myImg"></div>
<div class="Cbox_Ms">
</div>
</div>
<div id = "preview"></div>
</form>
</body>
</html>
评论0