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

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

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

       jquery的代码实现：

//用于压缩图片的canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');// 瓦片canvasvar 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、.jpgvar 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);        })};