微信小程序实现拍照打卡功能

本文实例为大家分享了微信小程序实现拍照打卡的具体代码，供大家参考，具体内容如下由于拍照组件是相当于一个块，用隐藏显示的方法不太好，为了更好的用户交互，选择了在一个新的页面调用相机组件，上传图片并保存打...

本文实例为大家分享了微信小程序实现拍照打卡的具体代码，供大家参考，具体内容如下

由于拍照组件是相当于一个块，用隐藏显示的方法不太好，为了更好的用户交互，选择了在一个新的页面调用相机组件，上传图片并保存打卡数据的方式。

小程序端

签到页面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:'fryotBCuont'
  })
 }
},
signPhoto(){//上传文件，并保存打卡数据
 let _self = this;
 wx.uploadFile({
  url: getApp().globalData.requestPath + '/sign/saveSignPhoto',
  filePath: _self.data.src,
  name: 'pythonfilePath',
  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(www.cppcns.com)) + "." +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("保存失败");
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。