本文实例为大家分享了微信小程序实现拍照打卡的具体代码，供大家参考，具体内容如下 由于拍照组件是相当于一个块，用隐藏显示的方法不太好，为了更好的用户交互，选择了在一个
本文实例为大家分享了微信小程序实现拍照打卡的具体代码，供大家参考，具体内容如下
由于拍照组件是相当于一个块，用隐藏显示的方法不太好，为了更好的用户交互，选择了在一个新的页面调用相机组件，上传图片并保存打卡数据的方式。
小程序端
签到页面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("保存失败");
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。