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

我就是我 2022-06-05 10:07 329阅读 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;
        }

上传到后台时，如果返回status=500，很可能你后台程序的上传解析有问题。注意下struts的配置

发表评论取消回复

表情：

评论列表（有 0 条评论，329人围观）

还没有评论，来说两句吧...

相关阅读

相关 IOS调取系统摄像头并拍照

<UIImagePickerControllerDelegate> 1、打开摄像头 \- (IBAction)Open:(id)sender

骑猪看日落/ 2023年10月18日 08:41/ 0 赞/ 17 阅读

相关 JS调用摄像头拍照，上传图片并显示到前端页面

本文实例为大家分享了JS实现截取视频画面的具体代码，供大家参考，具体内容如下： index.jsp 展示界面，按钮点击拍照，将拍照图片显示 <img id="s

布满荆棘的人生/ 2023年10月05日 21:46/ 0 赞/ 14 阅读

相关 H5调用手机的摄像头拍照上传以及手机相册选取照片

H5调用手机的摄像头拍照上传以及手机相册选取照片语法： <input accept="audio/|video/|image/|MIME_type"> 提示：如

系统管理员/ 2022年09月25日 12:19/ 0 赞/ 266 阅读

相关 JS 调取摄像头

JS 调取摄像头截止目前（2016-06-23）为止，js 调取摄像头实现视频聊天，部分浏览器还是不怎么支持的。示例1 ：代码附上： <!DOCT

亦凉/ 2022年09月21日 14:27/ 0 赞/ 109 阅读

相关 Hbuilder mui 相册拍照图片上传

在做WebAPP项目中，需要从相册或是拍照，视频或录音，然后上传，比如修改用户头像或是上传项目图片等. ![这里写图片描述][SouthEast] 点击用户头像后，弹出

蔚落/ 2022年06月13日 01:26/ 0 赞/ 435 阅读

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

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

我就是我/ 2022年06月05日 10:07/ 0 赞/ 330 阅读

相关控制摄像头拍照

现在的智能手机和平板电脑一般都会提供摄像头拍照功能。在Android中提供了专门用于处理摄像头相关事件的类，即android.hardware包中的Camera类。Camer

喜欢ヅ旅行/ 2022年06月02日 07:36/ 0 赞/ 228 阅读

相关 SliverLight使用摄像头拍照并上传到数据库

asp.net+ silverlight摄像头拍照上传图片存入数据库本例子实现的功能：便用连接电脑的摄像头拍照并存入数据库中，然后显示出来以及包含JS与silver

ゞ浴缸里的玫瑰/ 2022年05月12日 06:04/ 0 赞/ 182 阅读

相关树莓派USB摄像头拍照上传至PC

原文地址 --->[巴普洛夫的石头的博客][Link 1] 先保存一份代码，日后写一份详细的编码过程 Client.py import socket im

一时失言乱红尘/ 2022年04月24日 02:38/ 0 赞/ 269 阅读

相关 MUI调用手机相机拍照+压缩+上传

<div id="image" style="height: 130px;background: fff;padding-top: 10px;display: flex

谁借莪１个温暖的怀抱￠/ 2022年03月16日 05:14/ 0 赞/ 322 阅读