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;