摘要：關于移動端拍照上傳圖片的解決方案場景產(chǎn)品要求用戶拍一張身份證和一張人像，然后后臺調(diào)用商用接口比對證件和人像的匹配度。缺點手機拍照圖片過大，壓縮后，圖片依然大，沒上傳一次花費時間過長，最后再調(diào)用接口比對時間花費也長。

場景

產(chǎn)品要求用戶拍一張身份證和一張人像，然后后臺php調(diào)用商用接口比對證件和人像的匹配度。

證件和人像分別上傳到后臺，然后返回圖片地址，前端回顯。
點擊核驗按鈕，ajax再將返回的圖片地址傳到后臺，后臺將地址轉(zhuǎn)成bases64,調(diào)用接口比對，返回結果。

手機拍照圖片過大，webupload壓縮后，圖片依然大，沒上傳一次花費時間過長，最后再調(diào)用接口比對時間花費也長。
webupload的樣式需要重新定義

.webuploader-pick {
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: transparent;
    }

webupload的input框沒辦法限制用戶只能調(diào)用攝像頭。(webupload加載完成后會生成一個input框,但是頁面加載后不能重新給input添加屬性，只有在上傳中才能獲取到).

用戶點擊input按鈕,調(diào)用FileReader對象生成file.
利用canvas壓縮圖片，context進行繪圖回顯。
再將base64碼dataURL轉(zhuǎn)為file.
利用FormData對象追加file.發(fā)送后臺。
后臺$_FILES接受后，轉(zhuǎn)為base64發(fā)送到接口，獲取結果。

1.流程稍顯復雜。
2.兼容性問題。

   // 掃描身份證
        $(".input-card").on("change", function () {
            var oFReader = new FileReader();
            var card_files = document.getElementById("card-file").files[0];
            oFReader.readAsDataURL(card_files);
            oFReader.onloadend = function (oFRevent) {
                img = new Image();
                img.src = oFRevent.target.result;
                img.onload = function () {
                    // 獲取照片信息 等于6時照片會旋轉(zhuǎn)90°
                    var photo = getPhotoOrientation(img);
                    // 壓縮圖片
                    var compress_data = compress(img);
                    // 將圖片url轉(zhuǎn)為file類型 （直接base64傳到后臺始終太大了）
                    card_img_file = dataURLtoFile(compress_data, "img.png");
                    $(".crad-img").attr("src", img.src);
                    //$("#compress_card").attr("src", imgfile);
                }
                // 太大就進行壓縮
            }
        })
        
        // 圖片壓縮
        function compress(img) {
            canvas.width = img.width
            canvas.height = img.height
            //利用canvas進行繪圖
            context.drawImage(img, 0, 0); // 重要
            //將原來圖片的質(zhì)量壓縮到原先的0.2倍。
            var data = canvas.toDataURL("image/jpeg", 0.1) //data url的形式
            return data
        }
          // base64 轉(zhuǎn)file
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {
                type: mime
            });
        }
        //獲取照片的元信息（拍攝方向）
        function getPhotoOrientation(img) {
            var orient;
            EXIF.getData(img, function () {
                orient = EXIF.getTag(this, "Orientation");
            });
            return orient;
        }
         //確定核驗
        $("#saveDate").on("click", function () {
            var _token = $("meta[name="csrf-token"]").attr("content");
            var formData = new FormData();
            formData.append("_token", _token); // 追加token
            formData.append("order_room_id", order_room_id); // 追加其他項目參數(shù)
            formData.append("face_img_file", face_img_file); // 追加文件
            formData.append("card_img_file", card_img_file);
            msg = layer.open({
                type: 2,
                content: "核驗中"
            });
            $.ajax({
                url: "/check-in/ajax-real",
                type: "post",
                data: formData,
                cache: false,
                processData: false, // 必填參數(shù)
                contentType: false, // 必填參數(shù)
                async: false,
                dataType: "json",
                success: function (data) {
                    layer.close(msg);
                    if (data.status == "success") {
                        layer.open({
                            content: data.msg,
                            skin: "msg",
                            time: 2,
                            end: function (layero, index) {
                                // 跳轉(zhuǎn)table頁
                                window.location.href =
                                    "{{Route("check.table",["num"=>$total_num,"order_room_id"=>$order_room_id])}}";
                            }
                        });
                    } else {
                        layer.open({
                            content: data.msg,
                            skin: "msg",
                            time: 3
                        });
                    }
                }

            });
        })