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

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

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

HTML:

<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();// 缩放图片需要的canvasvar 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调用手机摄像头拍照成功；

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

H5调用手机拍照显示并压缩相关推荐

H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
SpringBoot项目H5界面手机拍照调用腾讯云OCR卡证识别接口完整例子
最近一个微信端项目的功能涉及一个手机拍照上传身份证识别身份证信息回显的功能,调用的接口是腾讯云OCR的卡证识别功能.看了腾讯云的api通俗易懂,本地写好了demo测试可用.H5界面手机拍照调用后台方法 ...
h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
原生js调用手机拍照功能
原生js调用手机拍照功能此功能主要用于混合App开发时手机拍照上传图片的功能! 话不多说直接上代码! 注:此代码在浏览器中运行时会报错,必须打开调试功能在手机上运行才可以! // html部分 // ...
移动端h5实现手机拍照上传图片，相册选择上传图片input type=file
移动端h5实现手机拍照上传图片,相册选择上传图片input type=file 有不足或者不对的在下方留言,有不明白的也请在下方留言,虽然我不一定能看到,话不多说上代码,注释都写好了 <!doc ...
h5前端调用android拍照功能,H5调用Android拍照和摄像以及选取相册
之前一直认为H5调用Android,H5不需要Android配合能直接实现功能.前段时间,自己做这个功能,才发现不是这么回事. H5编写 html文件里只需要标签即可实现代码,代码如下所示: 拍照 ο ...
java如何调用手机拍照功能_手把手教你如何实现拍照功能
实现手机拍照功能,纯JS书写 First: 先上图为主,再做详细讲解: 需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做Navigator属性在JS代码运行时打开页面自动开启不明白?直接上代码 ...
H5调用相机，裁剪，压缩照片
最近项目中遇到拍照,预览上传的问题,苹果手机不兼容,拍照旋转90度,在网上查找出好多方法,都无效,最后用input调用相机,然后用canvas画布裁剪照片,压缩保存,代码如下. <!DOCTYP ...

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

H5调用手机拍照显示并压缩相关推荐

最新文章

热门文章