拍照上傳圖片功能實現

   以前上傳圖片功能一直是選擇一張圖片而後上傳，爲了方便快捷，新需求須要修改上傳圖片功能經過拍照上傳。通過搗鼓完美實現，順便在這裏記錄下。

   國際慣例，先上效果圖：

 

 

這樣一張圖片就拍好了。那麼如何實現的呢？看下面：

這裏直接貼代碼了，你們能夠直接Copy到網站運行看效果~

前臺Html代碼：

        <input type="hidden" id="merchantImgBase64" />
                    <div style="max-width:320px; margin:0px auto;">
                        <div id="imageDiv">
                            <img id="MemberImage" src="/Content/zero/images/user-1.png" style="width:100%; height:100%; object-fit:fill;" />
                        </div>
                        <div id="gatherDiv" style="display:none;">
                            <video id="video" width="320" height="320" style="width:100%; height:100%; object-fit:fill;" controls></video>
                        </div>
                        <div id="canvasDiv" style="display:none;">
                            <canvas id="canvas" width="320" height="320" style="width:100%; height:100%; object-fit:fill;"></canvas>
                        </div>

                        <button id="captureShow" class="text-center">啓用拍照</button>
                        <div id="btnControlDiv" style="display:none;">
                            <button id="capture">拍照</button>
                            <button id="captureSave">保存</button>
                            <button id="captureCancel">重拍</button>
                            <button id="captureExit">退出拍照</button>
                        </div>
                    </div>

 

前臺JS部分:

//訪問用戶媒體設備的兼容方法
        function getUserMedia(constraints, success, error) {
            if (navigator.mediaDevices.getUserMedia) {
                //最新的標準API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia) {
                //webkit核心瀏覽器
                navigator.webkitGetUserMedia(constraints, success, error)
            } else if (navigator.mozGetUserMedia) {
                //firfox瀏覽器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
                //舊版API
                navigator.getUserMedia(constraints, success, error);
            }
        }

        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');

        function success(stream) {
            //兼容webkit核心瀏覽器
            let CompatibleURL = window.URL || window.webkitURL;
            //將視頻流設置爲video元素的源
            console.log(stream);
            mediaStreamTrack = stream;
            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        }

        function error(error) {
            console.log(`訪問用戶媒體設備失敗${error.name}, ${error.message}`);
        }
        //啓動攝像頭
        function openVideo() {
            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                //調用用戶媒體設備, 訪問攝像頭
                getUserMedia({ video: { width: 320, height: 320 } }, success, error);
                return true;
            } else {
                alert('不支持訪問用戶媒體');
                return false;
            }
        }
        //關閉攝像頭
        function closeVideo() {
            mediaStreamTrack.getTracks().forEach(function (track) {
                track.stop();
            });

        }
        //啓用拍照功能
        document.getElementById('captureShow').addEventListener('click', function () {
            if (openVideo()) {
                $("#imageDiv").hide();
                $("#gatherDiv").show();
                $("#canvasDiv").hide();
                $("#captureShow").hide();
                $("#btnControlDiv").show();
                $("#capture").attr('disabled', false);
                $("#captureSave").attr('disabled', true);
                $("#captureCancel").attr('disabled', true);
            }
        })
        //拍照
        document.getElementById('capture').addEventListener('click', function () {
            context.drawImage(video, 0, 0, 320, 320);
            $("#gatherDiv").hide();
            $("#canvasDiv").show();
            $("#capture").attr('disabled', true);
            $("#captureSave").attr('disabled', false);
            $("#captureCancel").attr('disabled', false);
        })
        //重拍
        document.getElementById('captureCancel').addEventListener('click', function () {
            $("#gatherDiv").show();
            $("#canvasDiv").hide();
            $("#capture").attr('disabled', false);
            $("#captureSave").attr('disabled', true);
            $("#captureCancel").attr('disabled', true);
        })
        //保存
        document.getElementById('captureSave').addEventListener('click', function () {
            $("#gatherDiv").show();
            $("#canvasDiv").hide();
            $("#capture").attr('disabled', true);
            $("#captureSave").attr('disabled', true);
            $("#captureCancel").attr('disabled', true);
            UploadPic();
        })
        //退出拍照功能
        document.getElementById('captureExit').addEventListener('click', function () {
            $("#imageDiv").show();
            $("#gatherDiv").hide();
            $("#canvasDiv").hide();
            $("#captureShow").show();
            $("#btnControlDiv").hide();
            closeVideo();
        })

        var _entryService = abp.services.app.entry;
        //上傳圖片到後臺
        function UploadPic() {
            // Generate the image data（將Canvas的內容保存爲圖片藉助toDataURL來實現） 方法返回一個包含圖片展現的 data URI 。
            var Pic = document.getElementById("canvas").toDataURL("image/jpg");
            $("#MemberImage").attr("src", Pic);//渲染圖片
            //對其進行base64編 以後的字符串
            Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");

            $('#merchantImgBase64').val(Pic);//將base64保存起來，保存用戶時提交到後臺生成圖片便可

            $("#captureExit").click();//退出拍照

     
        }

後臺部分代碼:

     public async Task<bool> MemberImgUpLoadAsync(Guid memberId, string userImgBase64)
        {

            userImgBase64 = Regex.Replace(userImgBase64, "^data:image/(\\S*);base64,", "");
            return await _fileRecordManager.UpLoadFileAndAddRecord(
               userImgBase64,
               Enums.EnumFileRecordBizType.Person_MenberFace,
               memberId,
               Enums.EnumFileRecordFileCategory.image,
               true,
               AbpSession.UserId
            );
        }

具體將Base64轉換爲圖片參考這位兄臺的博客：http://www.javashuo.com/article/p-hvxwaosu-eh.html