背景: 调用摄像头，获取图片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。完成