mui调取手机摄像头，拍照，上传-蒲公英云

mui调取手机摄像头，拍照，上传

我就是我 2022-06-05 10:07 415阅读 0赞

最近在做H5,调取手机摄像头，拍照，上传功能，本想上传base64编码，却没实现，后改为上传二进制文件的方式上传的，废话不多说，上代码：

<script src="js/fw/jquery/jquery-1.12.2.min.js"></script>
        <script src="vendor/libs/mui.min.js"></script>
        <script type="text/javascript">
            var file_url;
            var timestamp;
            var dataBase64;
            mui.init();
            mui.plusReady(function() { 
                // 扩展API加载完毕后调用onPlusReady回调函数 
                document.getElementById('faceVali').addEventListener('tap', function() { 
                    openCamera();
                },false);
            });
            //打开手机摄像头
            function openCamera() { 
                var cmr = plus.camera.getCamera();
                cmr.captureImage(function(p) { 
                    plus.io.resolveLocalFileSystemURL(p, function(entry) { 
                        plus.nativeUI.showWaiting("人脸识别中", ""); //显示系统loading框
                        plus.zip.compressImage({
                            src: entry.toLocalURL(),
                            dst: '_doc/camera/' + p,
                            overwrite: true,
                            format: "jpg",
                            width: "30%"
                        }, function(zip) { 
                            if(zip.size > (1 * 1024 * 1024)) {
                                return mui.toast('文件超大,请调整相机重新拍照');
                            }
                            file_url = zip.target;
                            //转为base64
// getBase64(file_url);
                            uploadToServer(file_url);
                        }, function(zipe) { 
                            plus.nativeUI.closeWaiting();
                            mui.toast('压缩失败！')
                        });
                    }, function(e) { 
                        plus.nativeUI.closeWaiting(); //获取图片失败,loading框取消
                        mui.toast('失败：' + e.message); //打印失败原因,或给出错误提示
                    });
                }, function(e) { 
                    plus.nativeUI.closeWaiting(); //开启照相机失败,关闭loading框
                    mui.toast('失败：' + e.message); //打印错误原因,给出错提示
                }, {
                    filename: '_doc/camera/', //图片名字
                    index: 1 //摄像头id
                });
            }
            //上传
            function uploadToServer(file_url) { 
                var url = ITFC_ADDR.JP_FACEVERIFY;
                var task = plus.uploader.createUpload(url, {method:"POST",priority:100}, function(t, status) { 
                    plus.nativeUI.closeWaiting();
// mui.toast("t="+JSON.stringify(t));
                    if(status == 200) {
                        var msg = JSON.parse(task.responseText); 
                        if(msg.message.code=='00'){
   //人脸验证通过
                            mui.toast(msg.message.message);
                            console.log(msg.message.message);
                            postImg();
                        }else{
   //验证失败
                            mui.toast(msg.message.errorMessage);
                        }
                    } else {
                        console.log(':上传失败');
                        mui.toast("上传失败: " + status);
                    }
                });
                task.addFile(file_url, {key: 'faceImg'});
                /*task.addEventListener("statechanged",function(upload, status ){ mui.toast(upload+"==="+ status ); },false);*/
                task.start();
            }
            //获取base64方法
            function getBase64(url) {  //传入图片路径
                function getBase64Image(img,width,height) { 
                    var canvas = document.createElement("canvas");
                    canvas.width = width ? width : img.width;
                    canvas.height = height ? height : img.height;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    dataBase64 = canvas.toDataURL("image/jpg");
                    postImg(dataBase64.substr(22));//dataBase64上传到后台
                }
                var image = new Image();
                image.onload=function(){ //onload事件不执行，后查是因为onloand事件是基于http协议的，file://。。.jpg路径没法执行，弃之 
                    mui.toast("load2");
                    getBase64Image(image);
                };
                image.src=url;
            }
        </script>
java后台：
private File faceImg;
byte[] imgCurrent = getBytesFromFile(faceImg);
public static byte[] getBytesFromFile(File f){
        if(f!=null){
            BufferedInputStream bis = null;
            try {
                ByteArrayOutputStream bos = new ByteArrayOutputStream((int)f.length());
                bis = new BufferedInputStream(new FileInputStream(f));
                int buf_size = 1024;
                int len = 0;
                byte[] buffer = new byte[buf_size]; 
                while(-1 != (len = bis.read(buffer, 0, buf_size))){
                    bos.write(buffer,0,len);
                }
                bos.flush();
                return bos.toByteArray();
            } catch (IOException e) {
                log.error("人脸上传出错："+e.getMessage());
            }finally{
                if(bis != null){
                    try {
                        bis.close();
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
        return null;
    }