html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/style.css"> <link rel="stylesheet" href="../css/element.css"> <script src="../js/rem.js"></script> <script src="../js/pub.js"></script> <script src="../js/jquery-1.12.4.js"></script> <script type='text/javascript' src='../js/index.js' charset='utf-8'></script> <title>信息采集</title> <style> nav { height: 0.5rem; width: 100%; font-size: 0.18rem; line-height: 0.5rem; text-align: center; border-bottom: 0.01rem solid #eee; } .logo { height: 2rem; } .btn { margin-top: 0.25rem; text-align: center; } .box { width: 100%; justify-content: space-around; margin-top: 0.15rem; } .img_box { height: 2.5rem; background: #eee; width: 100%; display: flex; justify-content: space-around; flex-direction: column; align-items: center; } .po_nav { padding: 0 0.2rem 0 0.2rem; font-size: 0.18rem; background-color: #fff; width: 100%; position: fixed; top: 0; left: 0; height: 0.5rem; display: flex; justify-content: space-between; align-items: center } .po_back { width: 0.22rem; height: 0.22rem; display: flex; justify-content: center; align-items: center } .po_back_row { width: 0.15rem; height: 0.15rem; } .head { width: 0.5rem; height: 0.5rem; margin: 0.5rem auto } .headipt { font-size: 0.16rem } .mine_container { width: 100%; height: 1.5rem; display: flex; justify-content: space-between; align-items: center; background-color: #fff; flex-direction: column; font-size: 0.16rem; padding-top: 0.2rem } .pic { font-size: 0.16rem; border: 0.01rem solid #eee; padding: 0.05rem 0.08rem; border-radius: 0.05rem; width: 1rem; display: inline-block; text-align: center; } .mine_pic { width: 0.65rem; height: 0.65rem; border-radius: 50%; } .fs { font-size: 0.14rem; margin-top: 0.5rem; color: #ccc; text-align: center; } .f_tit { font-size: 0.18rem; color: #282828 } [v-cloak] { display: none !important } .number_box { display: flex; justify-content: space-around; padding-top: 0.5rem; } .container input { opacity: 0; filter: alpha(opacity=0); height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 9; } #mainForm { width: 100%; padding: 0.15rem; font-size: 0.14rem; } .container { width: 100% !important; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; } </style></head><body> <!-- <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"> --> <div id="app" v-cloak> <nav> 速通门人员信息采集 </nav> <form id="mainForm"> <div class="content"> <div class="img-area"> <div class="container"> <input type="file" id='id-face' name='face' accept="image/*" /> <img class="logo" :src='src' alt="" id='face-result'> <div class="row_flex al_flex box"> <div id='face-empty-result'> <el-button size='mini'>拍照</el-button> </div> </div> </div> </div> </div> <div class="btn"> <el-button type="primary" size='mini' @click='submit'>提交</el-button> </div> </form> <div class="fs "> <span class="f_tit"> 拍照要求： </span> <span> 纯色背景， </span> <span> 免冠正面照， </span> <span> 亮度适中， </span> <span>如果不满意，点击图片可以更换</span> </div> </div> <script src="../js/vue.js"></script> <script src="../js/element.js"></script> <script src="../js/face.js"></script></body></html>复制代码js
var app = new Vue({ el: "#app", data: { uuid: '', identity_card: '', src: '../other/face.png', fg: false, }, created() { const that = this that.identity_card = pub._LinkParm('id') that.uuid = pub._LinkParm('uuid') }, mounted() { const that = this window.onload = function () { document.getElementById("id-face").addEventListener("change", function () { that.onFileChange(this, "face-result", "face-empty-result") }); // document.getElementById("id-back").addEventListener("change", function(){ // onFileChange(this,"back-result","back-empty-result") // }); // document.getElementsByClassName("btn")[0].addEventListener("click", function () { // if(that.fg){ // // that.submit(); // // console.log('zhen') // }else{ // // that.submit(); // // console.log('jia') // } // }); }; }, methods: { /** * 选中图片时的处理 * @param {*} fileObj input file元素 * @param {*} el //选中后用于显示图片的元素ID * @param {*} btnel //未选中图片时显示的按钮区域ID */ onFileChange(fileObj, el, btnel) { const that = this; // console.log('选择图片') that.fg = true var windowURL = window.URL || window.webkitURL; var dataURL; var imgObj = document.getElementById(el); document.getElementById(btnel).style.display = "none"; imgObj.style.display = "block"; if (fileObj && fileObj.files && fileObj.files[0]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); imgObj.src = dataURL; // console.log(dataURL) } else { dataURL = fileObj.value; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; // console.log(dataURL) } }, /** * 将图片压缩后返回base64格式的数据 * @param {*} image img元素 * @param {*} width 压缩后图片宽度 * @param {*} height 压缩后图片高度 * @param {*} qua //图片质量1-100 */ compressImageTobase64(image, width, height, qua) { var quality = qua ? qua / 100 : 0.8; var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'); var w = image.naturalWidth, h = image.naturalHeight; canvas.width = width || w; canvas.height = height || h; ctx.drawImage(image, 0, 0, w, h, 0, 0, width || w, height || h); var data = canvas.toDataURL("image/jpeg", quality); // console.log(w, h, width, height, data) return data; }, submit() { const that = this //1、form提交 //document.getElementById("mainForm").submit(); //2、压缩后ajax提交 // console.log('上传图片') if (that.fg) {
// 设置压缩图片的大小比例 var _img = document.getElementById("face-result"), _img_h = _img.naturalHeight, _img_w = _img.naturalWidth, _img_num = 1024, _img_width, _img_height, _img_b; if (_img_w > _img_h) { // console.log('kuan') _img_b = _img_num / _img_w; _img_width = _img_num; _img_height = _img_b * _img_h } else { // console.log('gao ') _img_b = _img_num / _img_h; _img_height = _img_num; _img_width = _img_b * _img_w } var face_data = that.compressImageTobase64(document.getElementById("face-result"), _img_width, _img_height, 90); var formData = new FormData(); formData.append("face", face_data); formData.append("identity_card", that.identity_card); // formData.append("back",back_data); //需引入jQuery $.ajax({ url: '', type: 'POST', cache: false, // data:JSON.stringify(data) , data: formData, dataType: "JSON", // timeout: 180000, processData: false, contentType: false, success: function (res) { // console.log(res) if(res.code =='200'){ that.src = res.data that.onSubmit() }else{ alert(res.msg) } }, error: function (r) { // console.log(r) } }); }else{ alert('请拍照！') } }, onSubmit() { const that = this; // console.log('baoxun') var use_parm = { that: that, _url: pub._url, ur: pub._DetailApi.editPhoto, // 具体接口 cbk: that.cb_editPhoto, // 回调 data: { uuid: that.uuid, photo_path: that.src }, // 形参 }; // console.log(use_parm) pub._InitAjax(use_parm) }, cb_editPhoto(res) { // e.log(res) if (res.code == "200") { alert('保存成功,跳转信息查询页！') setTimeout(function () { window.location.href = './card.html' }, 1000) } } },})复制代码input 调用摄像头
<input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput">复制代码转载于:https://juejin.im/post/5cff67315188254628166fc2