微信小程序 拍照打卡功能實現 附Java代碼

• 小程序端
• • 簽到頁面wxml
  • 簽到頁面js
  • 拍照頁面wxml
  • 拍照頁面js
• Java后臺
• • 保存照片
  • 保存打卡數據

由于拍照組件是相當于一個塊，用隱藏顯示的方法不太好，為了更好的用戶交互，選擇了在一個新的頁面調用相機組件，上傳圖片并保存打卡數據的方式。

小程序端

簽到頁面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,lowsuccess: (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("保存失敗");} }

總結

以上是生活随笔為你收集整理的微信小程序 拍照打卡功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。