摘要：關(guān)于移動(dòng)端拍照上傳圖片的解決方案場(chǎng)景產(chǎn)品要求用戶(hù)拍一張身份證和一張人像，然后后臺(tái)調(diào)用商用接口比對(duì)證件和人像的匹配度。缺點(diǎn)手機(jī)拍照?qǐng)D片過(guò)大，壓縮后，圖片依然大，沒(méi)上傳一次花費(fèi)時(shí)間過(guò)長(zhǎng)，最后再調(diào)用接口比對(duì)時(shí)間花費(fèi)也長(zhǎng)。

場(chǎng)景

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

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

手機(jī)拍照?qǐng)D片過(guò)大，webupload壓縮后，圖片依然大，沒(méi)上傳一次花費(fèi)時(shí)間過(guò)長(zhǎng)，最后再調(diào)用接口比對(duì)時(shí)間花費(fèi)也長(zhǎng)。
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框沒(méi)辦法限制用戶(hù)只能調(diào)用攝像頭。(webupload加載完成后會(huì)生成一個(gè)input框,但是頁(yè)面加載后不能重新給input添加屬性，只有在上傳中才能獲取到).

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

1.流程稍顯復(fù)雜。
2.兼容性問(wèn)題。

   // 掃描身份證
        $(".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時(shí)照片會(huì)旋轉(zhuǎn)90°
                    var photo = getPhotoOrientation(img);
                    // 壓縮圖片
                    var compress_data = compress(img);
                    // 將圖片url轉(zhuǎn)為file類(lèi)型 （直接base64傳到后臺(tái)始終太大了）
                    card_img_file = dataURLtoFile(compress_data, "img.png");
                    $(".crad-img").attr("src", img.src);
                    //$("#compress_card").attr("src", imgfile);
                }
                // 太大就進(jìn)行壓縮
            }
        })
        
        // 圖片壓縮
        function compress(img) {
            canvas.width = img.width
            canvas.height = img.height
            //利用canvas進(jìn)行繪圖
            context.drawImage(img, 0, 0); // 重要
            //將原來(lái)圖片的質(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;
        }
         //確定核驗(yàn)
        $("#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); // 追加其他項(xiàng)目參數(shù)
            formData.append("face_img_file", face_img_file); // 追加文件
            formData.append("card_img_file", card_img_file);
            msg = layer.open({
                type: 2,
                content: "核驗(yàn)中"
            });
            $.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頁(yè)
                                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
                        });
                    }
                }

            });
        })