本文主要介绍了在手机端如何使用jQuery对上传的大型图片进行压缩，以提高上传效率和节省资源。通过画布和拆分瓦片的压缩方法，详细阐述了jQuery代码实现图片压缩的步骤，并给出了HTML代码示例，适用于多张图片上传的场景。
手机端上传图片时，有时候图片会是一张比较大的图片，上传一张的大的图片会消耗比较大的资源影响效率，这个时候就需要对上传的图片进行压缩了。然而图片的压缩有很多种的实现方式，我这里主要是通过画布，拆分瓦片的形式来压缩图片。
（这个主要为个人笔记记录）
jquery的代码实现：
//用于压缩图片的canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var maxsize = 100 * 1024;
//使用canvas对大图片进行压缩
function compress(img) {
var initSize = img.src.length;
var width = img.width;
var height = img.height;
var bili = 1;
if(width>480){
bili = 480/width;
}else{
if(height>640){
bili = 640/height;
}else{
bili=1;
}
}
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
var ratio;
if ((ratio = width * height / 4000000) > 1) {
ratio = Math.sqrt(ratio);
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 / 1000000) > 1) {
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);
}
//进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', bili);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
}html的代码:
.inputfilestyle{
width:96%;
height:2.4rem;
cursor: pointer;
font-size: 30px;
outline: medium none;
position: absolute;
filter:alpha(opacity=0);
-moz-opacity:0;
opacity:0;
z-index:9999;
}上传多张图片的示例
<div class="card">
<div class="card-header">照片</div>
<div class="card-content" style="display: none;" id="carddiv">
<div class="card-content-inner">
<div id="imgresultdiv"></div>
</div>
</div>
<div class="card-footer">
<div class="content-block" style="width: 100%;">
<div class="row" style="width: 100%;">
<div class="col-100">
<input type="file" id="imgchoose" accept="image/*" multiple class="inputfilestyle" onclick="buttonclick();">
<a href="#" class="button button-big button-fill button-blue">上传照片</a>
</div>
</div>
</div>
</div>
</div>
</div>其jquery代码
var filechooser = document.getElementById("imgchoose");
var imagebase64Array = new Array();
var chooseflag = false;
var filelength = 0;
var checklength = 0;
function buttonclick(){
filelength = 0;
checklength = 0;
}
//删除照片
function deleteImg(num){
var temp = new Array();
for(var i=0;i<imagebase64Array.length;i++){
if(i!=num){
temp.push(imagebase64Array[i]);
}
}
imagebase64Array = temp;
showImg();
}
//显示照片
function showImg(){
if(imagebase64Array.length){
$("#imgresultdiv").html("");
for(var i=0;i<imagebase64Array.length;i++){
var tempstr = imagebase64Array[i];
var html = '<div style="border: 1px solid #cccccc;"><table style="width: 100%;"><tr><td align="center" style="background-image: url(\'\')">'
+'<img src="'+tempstr+'" width="98%" id="htzpimg'+i+'" name="htzpimg"/></td></tr></table>';
html =html+'<div class="menu-btn" style="margin: 15px;"><a href="#" onclick="deleteImg('+i+')">删除该照片</a></div></div>';
$("#imgresultdiv").append(html);
}
$("#carddiv").show();
}else{
$("#imgresultdiv").html("");
$("#carddiv").hide();
}
}
filechooser.onchange = function () {
$.showIndicator();
if (!this.files.length){
$.hideIndicator();
return;
}
var files = Array.prototype.slice.call(this.files);
/* if (files.length > 8) {
$.hideIndicator();
$.alert("最多同时只可上传8张图片");
return null;
} */
filelength = files.length;
files.forEach(function(file, i) {
if (!/\/(?:jpeg|png|gif|jpg)/i.test(file.type)) return; //可以上传的图片格式为 .jpeg、.png、.gif、.jpg
var reader = new FileReader();
//获取图片大小
var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
reader.onload = function() {
var result = this.result;
var img = new Image();
img.src = result;
//如果图片大小小于100kb，则直接上传
if (result.length <= maxsize) {
img = null;
$.hideIndicator();
imagebase64Array.push(result);
chooseflag = true;
checklength = checklength+1;
if(checklength==filelength){
showImg();
$("#imgchoose").val("");
$.alert("选择图片成功！");
}
return ;
}
//图片加载完毕之后进行压缩，然后上传
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
var data = compress(img);
$.hideIndicator();
imagebase64Array.push(data);
chooseflag = true;
checklength = htchecklength+1;
if(checklength==filelength){
showImg();
$("#imgchoose").val("");
$.alert("选择图片成功！");
}
img = null;
}
};
reader.readAsDataURL(file);
})
};
<div class="card">
<div class="card-header">照片</div>
<div class="card-content" style="display: none;" id="imgdiv">
<div class="card-content-inner">
<div id="resultdiv"></div>
</div>
</div>
<div class="card-footer">
<div class="content-block" style="width: 100%;">
<div class="row" style="width: 100%;">
<div class="col-100">
<input type="file" id="imgchoose" accept="image/*" multiple class="inputfilestyle">
<a href="#" class="button button-big button-fill button-blue" onclick="" id="shangchuanimg">上传照片</a>
</div>
</div>
</div>
</div>
</div>对应的jquery
var filechooser = document.getElementById("imgchoose");
var imagebase64 = "";
var chooseflag = false;
//删除照片
function deleteshowImg(num){
if(num==0){
imagebase64 = "";
chooseflag = false;
$("#resultdiv").html("");
$("#imgdiv").hide();
$("#shangchuanimg").attr("onclick","");
$("#shangchuanimg").html("上传照片");
$("#imgchoose").val("");
$("#imgchoose").show();
}
}
//页面显示上传的图片
function showImg(num){
if(num==0){
var html = '<table style="width: 100%;"><tr><td align="center" style="background-image: url(\'\')" >'
+'<img src="'+imagebase64+'" width="98%" id="htzpimg'+num+'" name="htzpimg"/></td></tr></table>';
$("#imgdiv").html(html);
$("#shangchuanimg").attr("onclick","deleteshowImg("+num+")");
$("#shangchuanimg").html("删除照片");
$("#imgdiv").show();
$("#imgchoose").hide();
}
}
//图片上传
filechooser.onchange = function () {
$.showIndicator();
if (!this.files.length){
$.hideIndicator();
return;
}
var files = Array.prototype.slice.call(this.files);
if (files.length > 1) {
$.hideIndicator();
$.alert("最多同时只可选择1张图片");
return ;
}
files.forEach(function(file, i) {
if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;
var reader = new FileReader();
//获取图片大小
var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";
reader.onload = function() {
var result = this.result;
var img = new Image();
img.src = result;
//如果图片大小小于100kb，则直接上传
if (result.length <= maxsize) {
$.hideIndicator();
img = null;
$.alert("选择图片成功！");
imagebase64 = result;
chooseflag = true;
showImg(0);
return ;
}
//图片加载完毕之后进行压缩，然后上传
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
var data = compress(img);
$.hideIndicator();
imagebase64 = data;
chooseflag = true;
showImg(0);
$.alert("选择图片成功！");
img = null;
};
reader.readAsDataURL(file);
})
};
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
