微信小程序實現拍照打卡功能
本文實例為大傢分享瞭微信小程序實現拍照打卡的具體代碼,供大傢參考,具體內容如下
由於拍照組件是相當於一個塊,用隱藏顯示的方法不太好,為瞭更好的用戶交互,選擇瞭在一個新的頁面調用相機組件,上傳圖片並保存打卡數據的方式。
小程序端
簽到頁面wxml
<view class="signBtn" bindtap="signSubmit"> <view>{{signTime}}</view> <view>打卡簽到</view> </view>
簽到頁面js
onLoad: function (options) { setInterval(function(){ showTime(_self); }, 1000); }, //簽到按鈕方法 signSubmit(){ let _self = this.data; let userInfo = this.data.ruleInfo; let data = { //簽到需要保存的數據 } if(this.data.signDisabled){//在打卡距離內 if(this.data.photoDisabled){//需要拍照人員 this.toPhoto(data); return true; } wx.request({ url: getApp().globalData.requestPath + '/sign/saveSignRuleData', data: data, method:'POST', header: {'content-type': 'application/json'}, success: function (res) { if(res.data.success){ wx.showToast({ title: '打卡成功', }) }else{ wx.showToast({ icon:'none', title: res.data.msg, }) } } }) }else{ wx.showToast({ icon: 'none', title: '當前位置不允許打卡', }) } }, //跳轉到拍照頁面方法 toPhoto(data){ let signData = JSON.stringify(data); wx.navigateTo({ url: './takePhoto?signData='+signData, //跳轉到自定義的一個拍照頁面 }) } //自動獲取時間,並實時顯示 function showTime(obj){ var today,year,month,day,hour,second,minute; var strTime; var strDate; today=new Date(); var year=today.getFullYear(); var month=today.getMonth(); var day=today.getDate(); hour = today.getHours(); minute =today.getMinutes(); second = today.getSeconds(); strDate = year+"年"+check(month)+"月"+check(day)+"日"; strTime = check(hour)+":"+check(minute)+":"+check(second); obj.setData({ signTime : strTime }) }
拍照頁面wxml
<view> <camera class="camera" device-position='{{devicePosition}}'> <cover-view> <cover-image wx:if="{{havaPhoto}}" src="{{src}}"></cover-image> </cover-view> </camera> <view hidden="{{havaPhoto}}" style="background-color:black;height:15vh"> <button bindtap="takePhoto" class="takeButton" style="left:45vw">拍照</button> <button bindtap="changeCamera" class="takeButton" style="right:15vw">轉換</button> </view> <view hidden="{{!havaPhoto}}" style="background-color:black;height:15vh"> <button bindtap="retake" class="takeButton" style="left:15vw">重拍</button> <button bindtap="signPhoto" class="takeButton" style="left:45vw">打卡</button> </view> </view>
拍照頁面js
takePhoto(){//拍照按鈕 let ctx = wx.createCameraContext(); let _self = this; ctx.takePhoto({ quality: 'high',//high,normal,low success: (res) => { _self.setData({ src:res.tempImagePath, havaPhoto:true }) } }) }, retake(){//重新拍攝 this.setData({ havaPhoto:false, src:'' }) }, changeCamera(){//轉換攝像頭 if(this.data.devicePosition=='front'){ this.setData({ devicePosition:'back' }) }else{ this.setData({ devicePosition:'front' }) } }, signPhoto(){//上傳文件,並保存打卡數據 let _self = this; wx.uploadFile({ url: getApp().globalData.requestPath + '/sign/saveSignPhoto', filePath: _self.data.src, name: 'filePath', formData: { 'user': _self.data.signData.userId }, success: function (res) { let resData = JSON.parse(res.data); let data = _self.data.signData; data.imagePath = resData.msg; if(res.statusCode==200 && resData.success){ wx.request({ url: getApp().globalData.requestPath + '/sign/saveSignRuleData', data: data, method:'POST', header: {'content-type': 'application/json'}, success: function (result) { if(result.data.success){ wx.showToast({ title: '打卡成功', }) setTimeout(() => { wx.navigateBack(); }, 2000); }else{ wx.showToast({ icon:'none', title: result.data.msg, }) } } }) }else{ wx.showToast({ title: resData.msg, }) setTimeout(() => { wx.navigateBack(); }, 2000); } } }) }
Java後臺
保存照片
@RequestMapping("/saveSignPhoto") @ResponseBody public AjaxResult saveSignPhoto(HttpServletRequest request, @RequestParam(value = "filePath", required = false) MultipartFile file) throws IOException { String fileName = file.getOriginalFilename(); String path; String type; String trueFileName; String basePath = "D:/file/"; String user = request.getParameter("user"); if(!file.isEmpty()) { type = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null; if (type != null) { if ("PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) { // 項目在容器中實際發佈運行的根路徑 // String realPath = request.getSession().getServletContext().getRealPath("/"); // 自定義的文件名稱 trueFileName = System.currentTimeMillis() + "_" +user + "_" + sdf.format(new Date()) + "." +type; // 設置存放圖片文件的路徑 path = basePath + trueFileName; file.transferTo(new File(path)); }else { return AjaxResult.errorResult("文件類型錯誤"); } }else { return AjaxResult.errorResult("文件類型不存在"); } }else { return AjaxResult.errorResult("文件不存在"); } return AjaxResult.successResult(trueFileName); }
保存打卡數據
@RequestMapping("/saveSignRuleData") @ResponseBody public AjaxResult saveSignRuleData(@RequestBody BgCard bgCard){ boolean flag = signDataService.saveSignRuleData(bgCard); if(flag){ return AjaxResult.successResult(); }else { return AjaxResult.errorResult("保存失敗"); } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。