H5 调用摄像头演示

背景: 调用摄像头，获取图片Base64数据传入后台，并返回结果

使用技术 Jquery, lrz压缩，作为搬运工，参考的地址如下
https://blog.csdn.net/Fiona_lms/article/details/80813112

https://blog.csdn.net/zhongbaolin/article/details/49817611

1: 前端HTML部分
* 注意lrz 下载地址: https://files.cnblogs.com/files/eason-d/localResizeIMG-4.9.35.zip

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 
  <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>H5调用摄像头演示</title>
  <!-- 若jquery无效，参考CDN网址: https://www.bootcdn.cn/ -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- lrz的JS源码dist目录 下载文件:  -->
  <script src="http://www.yunpiaobox.cn/imgTest/dist/lrz.bundle.js"></script>
  <style>
    .imgBox2 {
      position: relative;
      text-align: center;
       8.65rem;
      height: 6rem;
      background: rgba(255, 255, 255, 1);
      border-radius: 0.13rem;
      margin: 0.3rem auto;
      padding: 0.5rem;
    }

    #upload-container {
       8rem;
      height: 3rem;
      overflow: hidden;
      margin: 1rem auto 0rem;
    }

    .addcarimg1 {
       4rem;
      height: 3rem;
      overflow: hidden;
    }

    .imgboxa {
      position: absolute;
      color: #999;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      -moz-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      -webkit-transform: translate3d(-50%, -50%, 0);
      -o-transform: translate3d(-50%, -50%, 0);
    }

    .input1 {
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100%;
       100%;
      opacity: 0;
    }
  </style>
</head>

<body>
  <!--
  <h3>image图片</h3>
  <input type="file" accept="image/*" capture="camera">

  <h3>image图片 – 多选</h3>
  <input type="file" accept="image/*" multiple>

  <h3>image图片 - 前置摄像头调用</h3>
  <input type="file" accept="image/*" capture="user">

  <h3>video视频</h3>
  <input type="file" accept="video/*" capture="camcorder">

  <h3>audio音频</h3>
  <input type="file" accept="audio/*" capture="microphone">
  -->
  <div class="imgBox1">
    <div class="title1">一、本人与身份证、新银行卡的合照</div>
    <div id="upload-container">
      <img class="addcarimg1" id="blah1" src="https://cdn.laicunba.com/lcb/activity/Group.png" style="" /></div>
    <a href="javascript:;" class="imgboxa">
      <span class="txt textNo1">上传图片</span>
      <input type='file' accept="image/*" class="input1" id="input1" />
    </a>
  </div>
  <br /><br />
  <div id="showDataDiv"></div>

  <script>
    document.querySelector('input').addEventListener('change', function () {
      var that = this;
      lrz(that.files[0], {
           500, //设置图片压缩后的最大宽度，默认为原图宽度
          // height:600, //同上
          quality: 0.3 //图片压缩质量，取值 0 - 1，默认为 0.7
          // fieldName:"aijquery" //后端接收的字段名，默认：file,一般不用这项，我们要上传数据的话，可以自定义FormData对象
        })
        .then(function (rst) {
          var submitData = {
            image: rst.base64,
            name: rst.origin.name,
            fileLength: rst.base64.length
          };
          //alert('提交的数据:' + JSON.stringify(submitData));

          $.ajax({
            type: "POST",
            url: "http://192.168.1.131:8086/api/picture/uploadImg2",
            data: submitData,
            dataType: "json",
            beforeSend: function (XMLHttpRequest) {
              //showLoader();
            },
            success: function (data) {
              alert("成功:" + JSON.stringify(data));
              if ("1" == data.error) {
                alert(data.message);
                return false;
              } else {
                // 显示资料到页面上
                $("#showDataDiv").html(data.data);
                return false;
              }
            },
            complete: function (XMLHttpRequest, textStatus) {
              //hideLoader();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              // 上传失败 
              //hideLoader();
              alert('上传失败');
            }
          });
          return rst;
        });
    });
  </script>
</body>

</html>

2: Java后端部分

/**
 * 图片测试
 * 
 * @author eason
 * @date 2021-04-12
 */
@RestController
@RequestMapping("/api/picture")
public class ApiPictureController extends BaseController
{
    /**
     * 图片保存
     */
    @RequestMapping("/uploadImg2")
    @ResponseBody
    public Map<String, Object> uploadImg2(HttpServletRequest request) throws Exception {
        Map<String, Object> r = new HashMap<>();

        // new一个文件对象用来保存图片，默认保存当前工程根目录
        File imageFile = new File("D:/BeautyGirl5.png");

        String resultStr=request.getParameter("image").toString();//前端传来的是压缩后的并用base64编码后的字符串
        resultStr=resultStr.substring(resultStr.indexOf(",")+1);//需要去掉头部信息，这很重要
        System.out.println(resultStr);

        // 创建输出流
        FileOutputStream outputStream = new FileOutputStream(imageFile);
        // 获得一个图片文件流，我这里是从flex中传过来的
        BASE64Decoder base64Decoder = new BASE64Decoder();
        byte[] result = base64Decoder.decodeBuffer(resultStr);//解码
        for (int i = 0; i < result.length; ++i) {
            if (result[i] < 0) {// 调整异常数据
                result[i] += 256;
            }
        }
        outputStream.write(result);
        outputStream.flush();
        outputStream.close();

        r.put("error", 0);
        r.put("data", "haha, i am success data");
        return r;
    }
}

OK。完成