<
H5实现手机网页拍照并且压缩照片
  $("#user_img").click(function(){
    $('#user_phonefile').click()
  });

  $("#user_phonefile").change(function(){
    var reader = new FileReader();
      reader.onload = function (e) {
        //原图base64编码
        var result = this.result;
        //对图片进行压缩，并将压缩后的图片显示
        imageresize(result,"canvas",function(data){
          $("#user_img").attr("src",data);
        });
      };
      reader.readAsDataURL(this.files[0]);
  });

  //图片大小压缩
  //obase64原图base64
  //canvasid是canvas画布的id
  function imageresize(obase64,canvasid,fun){
    //图片最大宽度
    var maxwidth=300;
    //创建新的img对象
    var img=new Image();
    //把原图base4赋值给img对象
    img.src=obase64;
    img.onload = function () {
      //取最小宽度
      var w=Math.min(maxwidth,img.width);
      var h=img.height*(w/img.width);
      //创建canvas画布对象
      var canvas=document.createElement(canvasid);
      var ctx=canvas.getContext('2d');

      //设置canvas的宽高
      canvas.width=w;
      canvas.height=h;
      //讲最新尺寸图片画到画布上
      ctx.drawImage(img,0,0,w,h);
      //获取画布上最终图片base64编码返回
      var base64=canvas.toDataURL('image/jpeg');//获取压缩后的图片的base64
      fun(base64);
    };
  }


最后我们只需要把调用imageresize()返回的base64提交给服务器，服务器另存为图片之后，就实现了拍照，压缩，上传

>