作为程序员一定要保持良好的睡眠,才能好编程

手机拍照压缩上传

发布时间:2017-07-07


参考这个代码,压缩并上传

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/jquery-2.1.0.js"></script>
        <script src="../../js/app.js"></script>
        <script src="../../js/common.js"></script>
        <link href="../../css/mui.min.css" rel="stylesheet" />
        <link href="../../css/iconfont.css" rel="stylesheet" />
        <link href="../../css/style.css" rel="stylesheet" />
        <script type="text/javascript" charset="utf-8">
            //名片全能王 API调用地址,请注意连接中的user pass
            var uploadurl = "http://bcr2.intsig.net/BCRService/BCR_VCF2?PIN=**&user=**&pass=**&lang=2&size=";
            var userCardImgUrl = "_doc/camera/UserCARDTEMP.jpg";//拍照名片图片存放地址
            var userCardImgUrlNew = "_doc/camera/UserCARDTEMP01.jpg";//压缩后的图片存放地址
            mui.init();
            mui.plusReady(function() {
                //拍照按钮绑定事件
                $("#photoCard").on("tap", function() {
                    getImage();
                });
            });
            function getImage() {
                console.log("开始拍照:");
                var cmr = plus.camera.getCamera();
                cmr.captureImage(function(p) { //拍照成功
                    //得到图片
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {
                        console.log("打开文件成功:" + entry.fullPath);
                        //压缩文件并上传
                        getImageDimension("file://" + entry.fullPath, ERPcompressImage);
                    }, function() {
                        console.log("打开文件失败:" + p);
                    });
                }, function(e) {
                    console.log("失败:" + e.message);
                }, {
                    format: "jpg",
                    filename: userCardImgUrl,
                    index: 1
                });
            } 
            function matchCardMsgReplace(responeText, matchg) {
                var FNList = responeText.match(matchg); 
                var FN = "";
                if (FNList != null && FNList != undefined) {
                    for (var i = 0; i < FNList.length; i++) { 
                        FN = FN + FNList[i].replace(matchg, "$1");
                    }
                } 
                return FN.replace(/\;/g,"");
            }
            /*解析第三方回传数据并显示*/
            function ShowMessageOnPage(responeText) {
                $(".lable_002").html("");
                //console.log(responeText.match(/FN;CHARSET=utf-8:.*\r/g));
                $("#FN").html(matchCardMsgReplace(responeText, /FN;CHARSET=utf-8:(.*)\r/g)); 
                $("#CELLVOICE").html(matchCardMsgReplace(responeText, /TEL;CELL;VOICE:(.*)\r/g)); 
                $("#WORKVOICE").html(matchCardMsgReplace(responeText, /TEL;WORK;VOICE:(.*)\r/g));
                $("#WORKFAX").html(matchCardMsgReplace(responeText, /TEL;WORK;FAX:(.*)\r/g));
                $("#EMAIL").html(matchCardMsgReplace(responeText, /EMAIL;PREF;INTERNET:(.*)\r/g));
                $("#zhiwei").html(matchCardMsgReplace(responeText, /TITLE;CHARSET=utf-8:(.*)\r/g));
                $("#ADR").html(matchCardMsgReplace(responeText, /ADR;WORK;PREF;CHARSET=utf-8:(.*)\r/g));
                $("#ORG").html(matchCardMsgReplace(responeText, /ORG;CHARSET=utf-8:(.*)\r/g));
            }
            /*根据路径上传图片*/
            function uploadCardImg(fileURL, ImgSize) {
                console.log("准备开始上传");
                //上传照片对象
                var uploadimg = plus.uploader.createUpload(uploadurl + ImgSize, {
                    method: "POST"
                }, function(t, status) {//上传后执行的方法
                    console.log(status + "|" + t.responseText);
                    // 上传完成
                    if (status == 200) {
                        ShowMessageOnPage(t.responseText);
                    } else {}
                    //最后需要删除对应的图片
                    plus.io.resolveLocalFileSystemURL(userCardImgUrl, function(entry) {
                        entry.remove();
                        console.log("删除文件成功!" + userCardImgUrl);
                    }, function() {});
                    plus.io.resolveLocalFileSystemURL(userCardImgUrlNew, function(entry) {
                        entry.remove();
                        console.log("删除文件成功!" + userCardImgUrlNew);
                    }, function() {});
                });
                uploadimg.addFile(fileURL, {
                    key: "imgcark"
                });
                uploadimg.start();
            }
            function getImageDimension(imgURL, loadHandler) {
                var img = new Image();
                img.onload = loadHandler;
                img.src = imgURL;
            }
            /*压缩文件并上传*/
            function ERPcompressImage() {
                var imgW = "1024px";//对方建议图片宽度1024*768
                var imgH = "1024px";
                if (this.width >= this.height) {
                    imgH = "auto";
                } else {
                    imgW = "auto";
                }
                console.log(this.width + "*" + this.height);
                //压缩照片
                plus.zip.compressImage({
                        src: userCardImgUrl,
                        dst: userCardImgUrlNew,
                        overwrite: true,
                        format: "jpg", //对方只接受JPG
                        quality: 70, //对方建议质量
                        width: imgW,
                        height: imgH
                    },
                    function(res) {
                        //上传图片
                        uploadCardImg(userCardImgUrlNew, res.size);
                    },
                    function(error) {
                        console.log("图片压缩错误");
                    });
            }
        </script>
        <style>
            .mui-table-view-cell label {
                display: block;
                float: left;
                flex-wrap: nowrap;
                word-wrap: break-word;
                line-height: 25px;
            }
            .mui-table-view-cell .lable_001 {
                width: 35%;
                overflow: hidden;
                color: #555;
            }
            .mui-table-view-cell .lable_002 {
                width: 65%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav">
            <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                <span class="mui-icon mui-icon-left-nav">1</span>
            </button>
            <h1>名片扫描</h1>
            <button type="button" id="photoCard" class="mui-left mui-btn  mui-btn-link mui-btn-nav mui-pull-right">
                <span class="mui-icon iconfont icon-unie615">2</span>
            </button>
        </header>
        <div>
            <div id='list'>
                <ul>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>姓名:</label>
                        <label id="FN"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>手机:</label>
                        <label id="CELLVOICE"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>工作电话:</label>
                        <label id="WORKVOICE"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>传真:</label>
                        <label id="WORKFAX"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>EMAIL:</label>
                        <label id="EMAIL"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>职位:</label>
                        <label id="zhiwei"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>地址:</label>
                        <label id="ADR"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>公司:</label>
                        <label id="ORG"></label>
                    </li>
                    <li class="mui-table-view-cell mui-indexed-list-item">
                        <label>:</label>
                        <label id=""></label>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>