前端通过canvas做图片压缩处理

// 
<input id="takepicture" type="file" accept="image/*" capture="camera" style="display: none">
// 调用选择照片
var takePictureOnclick = function(){
    var takePicture = document.getElementById(‘takepicture‘);
    takePicture.click();
}
// 
// 监听照片拍摄,并获取照片流
  var takePicture = document.getElementById(‘takepicture‘);
  var takePictureUrl = function () {
      takePicture.onchange = function (event) {
          var files = event.target.files, file;
          if (files && files.length > 0) {
              file = files[0];
              try {
                  var URL = window.URL || window.webkitURL;
                 var blob = URL.createObjectURL(file);　　// 获取照片的文件流
                 compressPicture(blob);　　// 压缩照片
             }
             catch (e) {
                 try {
                     var fileReader = new FileReader();
                     fileReader.onload = function (event) {　　　　// 获取照片的base64编码
                         compressPicture(event.target.result);　　// 压缩照片
                     };
                     fileReader.readAsDataURL(file);
                 }
                 catch (e) {
                     alert(common.MESSAGE.title.error, ‘拍照失败,请联系客服或尝试更换手机再试!‘);
                 }
             }
         }
     }
 }();

这个onchange方法中，通过两种方式捕获用户拍照完之后的照片，第一种是捕获照片的文件流（存在一定兼容性问题），如果第一种方式不兼容则使用第二种方式获取照片的base64编码（这种方式兼容性较高），保险一点，两种方式都是用。

以上，就完成了前端的调用相机并拍照的功能。

var compressPicture = function (blob) {
    var quality = 0.5, image = new Image();
    image.src = blob;
    image.onload = function () {
      var that = this;
      // 生成比例
      var width = that.width, height = that.height;
      width = width / 4;
      height = height / 4;
     // 生成canvas画板
     var canvas = document.createElement(‘canvas‘);
     var ctx = canvas.getContext(‘2d‘);
     canvas.width = width;
     canvas.height = height;
     ctx.drawImage(that, 0, 0, width, height);
     // 生成base64,兼容修复移动设备需要引入mobileBUGFix.js
     var imgurl = canvas.toDataURL(‘image/jpeg‘, quality);
     // 修复IOS兼容问题
     if (navigator.userAgent.match(/iphone/i)) {
       var mpImg = new MegaPixImage(image);
       mpImg.render(canvas, {
         maxWidth: width,
         maxHeight: height,
         quality: quality
       });
       imgurl = canvas.toDataURL(‘image/jpeg‘, quality);
     }
     // 上传照片
     uploadPicture(imgurl);
   };
 }