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

上传多张图片的示例

   
照片
	

	    

		

	    
	
	

	    

		

		   

			
			上传照片
		   
		
	    
	 
   

其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'
				+'';
			html =html+'
删除该照片

'; $("#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); }) };

上传一张图片的示例

	
照片
		

			

			

		
	
	

		

			

				

					
					上传照片
				
			
		
	

对应的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 = '
'
			+'
';
		$("#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);
        })
};