H5 js中压缩图片并上传的方法（不失真）

H5 js中压缩图片并上传的方法（不失真）

很多情况下，我们上传图片到服务器前都是要经过压缩的，不然一张涨以M为单位的图片会累死服务器。

而js压缩图片无非是首先将获取到的图片（一般是input标签获取）用canvas画布将图片重新画出来，然后再将之转换成base64格式的文件，之后再将其转换为blob（点击跳转mdn）对象传输到服务器。

废话少说，直接上代码。
下面展示一些 内联代码片。

$("#uploadcontent1").change(function () {
//根据id获取到input标签选择的图片文件
  var ele = document.getElementById('uploadcontent1').files[0];
  //var fileSize = parseFloat(parseInt(ele['size']) / 1024 / 1024).toFixed(2);//判断文件大小，可以根据此来调节文件压缩比例，但本方法未采用此方式
  //FileReader对象，获取文件
  var fr = new FileReader();
  fr.onload = function (ele) {
  console.log("开始压缩");
			var square = 700;
			var canvas = document.createElement('canvas');
			canvas.width = square;
			canvas.height = square;
			var context = canvas.getContext('2d');
		    context.clearRect(0, 0, square, square);
			var imageWidth;
			var imageHeight;
			var offsetX = 0;
			var offsetY = 0;
			if (this.width > this.height) {
		      imageWidth = Math.round(square * this.width / this.height);
		      imageHeight = square;
		      offsetX = - Math.round((imageWidth - square) / 2);
			} else {
		      imageHeight = Math.round(square * this.height / this.width);
		      imageWidth = square;
		      offsetY = - Math.round((imageHeight - square) / 2);
			}
			context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
			var base64 = canvas.toDataURL('image/jpeg');
			 	//压缩完成执行回调，将base64转换成blob对象（此处是直接将base放到公共变量上在进行使用）
      htmlObj.oFileList[0] = htmlObj.convertBase64UrlToBlob(base64)
    };


    document.querySelector('.show-img1').appendChild(img);
  }
  fr.readAsDataURL(ele);
  }
});

在压缩成base64过程中最核心的代码就是context.drawImage()方法，在设定好宽高位置之后将图片绘制在canvas上。再之后通过canvas.toDataURL(‘image/jpeg’)方法，将canvas转换成base64的格式，此方法的第二个参数可以图片质量（默认质量为1），也可以起到压缩图片的作用（但容易失真）。

最后，将得到的base64编码文件转码成blob对象，即可上传到服务器，代码如下：
下面展示一些 内联代码片。

/**
 * 将以base64的图片url数据转换为Blob
 * @param urlData
 *            用url方式表示的base64图片数据
 */

htmlObj.convertBase64UrlToBlob = function (urlData) {
  var arr = urlData.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  console.log(new Blob([u8arr], {
    type: mime
  }))
  return new Blob([u8arr], {
    type: mime
  });
  //最后直接将得到的blob对象上传服务器即可。
}

代码中用到的重点方法都添加了mdn的详细解释，点击即可跳转。