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

2 篇文章 0 订阅
14 篇文章 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
    点赞
  • 8
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

猩猩之火

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值