微信小程序怎么實(shí)現(xiàn)拍照打卡功能

今天小編給大家分享一下微信小程序怎么實(shí)現(xiàn)拍照打卡功能的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

由于拍照組件是相當(dāng)于一個(gè)塊，用隱藏顯示的方法不太好，為了更好的用戶交互，選擇了在一個(gè)新的頁(yè)面調(diào)用相機(jī)組件，上傳圖片并保存打卡數(shù)據(jù)的方式。

小程序端

簽到頁(yè)面wxml

<view class="signBtn" bindtap="signSubmit">
  <view>{{signTime}}</view>
  <view>打卡簽到</view>
</view>

簽到頁(yè)面js

onLoad: function (options) {
  setInterval(function(){ showTime(_self); }, 1000);
},

//簽到按鈕方法
signSubmit(){
  let _self = this.data;
  let userInfo = this.data.ruleInfo;
  let data = {
    //簽到需要保存的數(shù)據(jù)
  }
  if(this.data.signDisabled){//在打卡距離內(nèi)
    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: '當(dāng)前位置不允許打卡',
    })
  }
},

//跳轉(zhuǎn)到拍照頁(yè)面方法
toPhoto(data){
  let signData = JSON.stringify(data);
  wx.navigateTo({
    url: './takePhoto?signData='+signData,    //跳轉(zhuǎn)到自定義的一個(gè)拍照頁(yè)面
  })
}

//自動(dòng)獲取時(shí)間，并實(shí)時(shí)顯示
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
  })
}

拍照頁(yè)面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}}" >
    <button bindtap="takePhoto" class="takeButton" >拍照</button>
    <button bindtap="changeCamera" class="takeButton" >轉(zhuǎn)換</button>
  </view>
  <view hidden="{{!havaPhoto}}" >
    <button bindtap="retake" class="takeButton" >重拍</button>
    <button bindtap="signPhoto" class="takeButton" >打卡</button>
  </view>
</view>

拍照頁(yè)面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(){//轉(zhuǎn)換攝像頭
  if(this.data.devicePosition=='front'){
    this.setData({
      devicePosition:'back'
    })
  }else{
    this.setData({
      devicePosition:'front'
    })
  }
},
signPhoto(){//上傳文件，并保存打卡數(shù)據(jù)
  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后臺(tái)

保存照片

@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())) {
                // 項(xiàng)目在容器中實(shí)際發(fā)布運(yùn)行的根路徑
//                    String realPath = request.getSession().getServletContext().getRealPath("/");
                // 自定義的文件名稱
                trueFileName = System.currentTimeMillis() + "_" +user + "_" + sdf.format(new Date()) + "." +type;
                // 設(shè)置存放圖片文件的路徑
                path = basePath + trueFileName;
                file.transferTo(new File(path));
            }else {
                return AjaxResult.errorResult("文件類型錯(cuò)誤");
            }
        }else {
            return AjaxResult.errorResult("文件類型不存在");
        }
    }else {
        return AjaxResult.errorResult("文件不存在");
    }
    return AjaxResult.successResult(trueFileName);
}

保存打卡數(shù)據(jù)

@RequestMapping("/saveSignRuleData")
@ResponseBody
public AjaxResult saveSignRuleData(@RequestBody BgCard bgCard){
    boolean flag = signDataService.saveSignRuleData(bgCard);
    if(flag){
        return AjaxResult.successResult();
    }else {
        return AjaxResult.errorResult("保存失敗");
    }
}

以上就是“微信小程序怎么實(shí)現(xiàn)拍照打卡功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。