H5调用手机拍照显示并压缩

近期在做一个人脸识别相关的项目，其中有一个功能是人脸绑定，需要拍一张人脸就好。

测试发现Android机型上拍照没问题，ios调取拍照有问题，后来经过测试修改，以下程序可以解决；

HTML:

<!---拍照完成显示所拍图片--->

<img id="imgTag" src="${ctxImg}/saomiao.jpg" width="350px" height="250px" alt="imgTag" >

<!---使用input-type的file属性，设置accept="image/*"，capture="camera"，外面包一层div(自定义按钮，不让界面显示,只显示拍照按钮)--->

<div class="file-box" id="box">
    <input type="file"  onchange="imgChange(this)" datatype="*" accept="image/*" capture="camera" id="file_input" class="file-btn">拍照
</div>

CSS:

<style type="text/css">
    #box{
        position: relative;
        margin: auto;
        /*margin-top: 44px;*/
        width: 92%;
        height: 44px;
        line-height: 44px;
        font-size: 1.1rem;
        text-align: center;
        color:  #fff;
        background-color: #07bdaf;
        border-radius: 4px;
    }

    #file_input{
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
</style>

JS:

<script>

 let imgBase64 = null;

    //人脸图片获取显示及转给base64方式一
//    var showimg = document.getElementById("imgTag");
//    var imginput = document.getElementById("file_input");
//    document.getElementById("box").onclick = function () {
//        imginput.onchange = function () {
//            var files = this.files;
//            console.log(files)   //本地的临时路径
//
//            var url = URL.createObjectURL(files[0]);
//            showimg.src = url;
//
//            // 生成一个文件读取的对象
//            var imgFile = new FileReader();
//            //发起异步读取文件请求，读取结果为data:url的字符串形式，
//            imgFile.readAsDataURL(files[0]);
//
//            imgFile.onload = function () {
//                imgBase64 = this.result; //base64数据
//                //console.log(img);
//            }
//        }
//    };

    //人脸图片获取显示及转为base64方式二
//    function imgChange(imgFile) {
//        // 生成一个文件读取的对象
//        const reader = new FileReader();
//        reader.onload = function (ev) {
//            // base64码
//            imgBase64 =ev.target.result;//或e.target都是一样的
//            //document.querySelector("img").src= ev.target.result;
//            //$("#imageInfo").val(imgFile);
//            document.getElementById("imgTag").src= ev.target.result;
//        }
//        //发起异步读取文件请求，读取结果为data:url的字符串形式，
//        reader.readAsDataURL(imgFile.files[0]);
//    }

    //推荐：人脸图片获取并压缩及转为base64 方式三
    function imgChange(imgFile) {
        // 生成一个文件读取的对象
        const img = new Image();
        const reader = new FileReader();
        // 缩放图片需要的canvas
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

        // base64地址图片加载完毕后
        img.onload = function () {
            // 图片原始尺寸
            var originWidth = this.width;
            var originHeight = this.height;
            // 最大尺寸限制
            var maxWidth = 400, maxHeight = 400;
            // 目标尺寸
            var targetWidth = originWidth, targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            if (originWidth > maxWidth || originHeight > maxHeight) {
                if (originWidth / originHeight > maxWidth / maxHeight) {
                    // 更宽，按照宽度限定尺寸
                    targetWidth = maxWidth;
                    targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                } else {
                    targetHeight = maxHeight;
                    targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                }
            }

            // canvas对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            imgBase64 = canvas.toDataURL("image/jpeg");
            document.getElementById("imgTag").src= imgBase64;
        };
        reader.onload = function (ev) {
            // base64码
            img.src =ev.target.result;//或e.target都是一样的
        };
        //发起异步读取文件请求，读取结果为data:url的字符串形式，
        reader.readAsDataURL(imgFile.files[0]);
    };

</script>

效果：

至此，H5调用手机摄像头拍照成功；

注：如有问题可以回复，看到第一时间分析解决，码农不易，感觉对您有用，帮助到您，可否打赏一杯可乐，在此谢过诸位，愿诸君终成大神，前程似锦~~~