jquery 前端实现图片压缩和上传

        手机端上传图片时，有时候图片会是一张比较大的图片，上传一张的大的图片会消耗比较大的资源影响效率，这个时候就需要对上传的图片进行压缩了。然而图片的压缩有很多种的实现方式，我这里主要是通过画布，拆分瓦片的形式来压缩图片。

  （这个主要为个人笔记记录）

       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);
        })
};