好资源导航 » 文章资讯 » 微信小程序实现身份证取景框拍摄

微信小程序实现身份证取景框拍摄

2023-07-16 22:57:03 77

本文实例为大家分享了微信小程序实现身份证取景框拍摄的具体代码，供大家参考，具体内容如下

wxml

wxss

.camera_box{
height:100vh;width:100vw;
position:relative;
}
.camera{
height:85vh;width:100vw;
z-index:1;
}
.id_m{
height:85vh;width:100vw;
z-index:999;
background:rgba(0,0,0,0.1);
display:flex;
position:absolute;
}
.id_m.img{
width:550rpx;
height:900rpx;
display:block;
position:absolute;
left:0;right:0;margin:autoauto;
top:0;bottom:0;
}
.id_m.tips_txt{
transform:rotate(90deg);
}
.camera_box.action{
height:15vh;
position:relative;
display:flex;
justify-content:space-around;
align-items:center;
}
.camera_box.takeBtn{
height:120rpx;width:120rpx;border-radius:50%;
font-size:24rpx;
background:url('https://cdn.ctoku.com/1123123123123e3241.png')no-repeatcenter;
background-size:contain;
border:none;
}
.camera_box.cancelBtn{
font-size:24rpx;
height:120rpx;width:120rpx;border-radius:50%;
background:url('https://cdn.ctoku.com/12311123342312231.png')no-repeatcenter;
background-size:contain;
border:none;
}
.camera_box.saveImg{
background:url('https://cdn.ctoku.com/1232123434231231231.png')no-repeatcenter;
font-size:24rpx;
height:120rpx;width:120rpx;border-radius:50%;
background-size:contain;
border:none;
}
.camera_box.takeBtn::after{
border:none;
}

.camera_img{
height:85vh;width:100%;
}

Page({

/**
*页面的初始数据
*/
data:{
src:'',
show:false
},
cancelBtn(){
this.setData({show:false})
},
saveImg(){
wx.showModal({
title:'图片地址',
content:this.data.src,
})
},
takePhoto(){
constctx=wx.createCameraContext()
constlistener=ctx.onCameraFrame((frame)=>{
console.log(frame)
})
ctx.takePhoto({
quality:'high',
success:(res)=>{
console.log(res)
this.setData({
src:res.tempImagePath,
show:true
})
listener.stop({
success:(res)=>{
console.log(res)
},
fail:(err)=>{
console.log(err)
}
})
},
fail:(err)=>{
console.log(err)
}
})
},
error(e){
console.log(e.detail)
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},

/**
*生命周期函数--监听页面初次渲染完成
*/
onReady:function(){

},

/**
*生命周期函数--监听页面显示
*/
onShow:function(){

},

/**
*生命周期函数--监听页面隐藏
*/
onHide:function(){

},

/**
*生命周期函数--监听页面卸载
*/
onUnload:function(){

},

/**
*页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function(){

},

/**
*页面上拉触底事件的处理函数
*/
onReachBottom:function(){

},

/**
*用户点击右上角分享
*/
onShareAppMessage:function(){

}
})

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

微信小程序实现身份证取景框拍摄

热门推荐

随机推荐