H5调用手机摄像头拍照,如何压缩后上传

H5调用手机摄像头拍照后,怎样压缩再上传?


实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传。


案例全部代码,示下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>关于html5中如何调用相机拍照并且压缩图片的示例详解</title>
</head>
<body>
    <h2>关于html5中如何调用相机拍照并且压缩图片的示例详解</h2>

    照相机:
    <input type="file" capture=camera accept="image/*">

    <br /><br />

    相册:
    <input type="file" accept="image/*">


<script type="text/javascript" language="JavaScript">
    $('input[type=file]').change(function(e) {
      var file = this.files[0];
      var mime_type=file.type;
      var orientation=0;
      if (file && /^image\//i.test(file.type)) {
        EXIF.getData(file,function(){
          orientation=EXIF.getTag(file,'Orientation');
        });

        var reader = new FileReader();
        reader.onloadend = function () {
          var width,height;
          var MAX_WH=800;
          var image=new Image();
          image.onload=function () {
            if(image.height > MAX_WH) {
              // 宽度等比例缩放 *=
              image.width *= MAX_WH / image.height;
              image.height = MAX_WH;
            }
            if(image.width > MAX_WH) {
              // 宽度等比例缩放 *=
              image.height *= MAX_WH / image.width;
              image.width = MAX_WH;
            }
            //压缩
            var quality=80;
            var cvs = document.createElement('canvas');
            cvs.width = width = image.width;
            cvs.height =height = image.height;

            switch (orientation) {
              case 6:
              case 8:
                cvs.width = height;
                cvs.height = width;
                break;
            }

            var context=cvs.getContext("2d");

            //解决ios图片旋转问题
            switch(orientation){
              //iphone横屏拍摄,此时home键在左侧
              case 3:
              // 180度向左旋转
              context.translate(width, height);
              context.rotate(Math.PI);
              break;
              //iphone竖屏拍摄,此时home键在下方(正常拿手机的方向)
              case 6:
              context.rotate(0.5 * Math.PI);
              context.translate(0, -height);
              break;
              //iphone竖屏拍摄,此时home键在上方
              case 8:
              // 逆时针旋转90度
              context.rotate(-0.5 * Math.PI);
              context.translate(-width, 0);
              break;
            }
            context.drawImage(image, 0, 0,image.width, image.height);
            dataURL = cvs.toDataURL('image/jpeg', quality/100);
            //获取识别结果
            ...
          }
          image.src=dataURL;
        };
        reader.readAsDataURL(file);
      }else{
        alert("只能识别图片!")
      }
    });
</script>

</body>
</html>

以上就是关于“ H5调用手机摄像头拍照,如何压缩后上传 ” 的全部内容。

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页