取景框图片 小程序_小程序实现身份证取景框拍摄

身份证取景框的实现主要是借助于camera 组件及cover-view组件

先看下案例

wxml代码

js代码

Page({

/**

页面的初始数据

/

data: {

src: ‘’,

show: false

},

cancelBtn () {

this.setData({show: false})

},

saveImg () {

wx.showModal({

title: ‘图片地址’,

content: this.data.src,

})

},

takePhoto() {

const ctx = wx.createCameraContext()

const listener = 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) {

wx.showModal({

title: ‘提示’,

content: ‘该功能仅供演示，不会上传图片信息，请放心使用！！！’,

})

},

/**

生命周期函数–监听页面初次渲染完成

*/

onReady: function () {

},

/**

生命周期函数–监听页面显示

*/

onShow: function () {

},

/**

生命周期函数–监听页面隐藏

*/

onHide: function () {

},

/**

生命周期函数–监听页面卸载

*/

onUnload: function () {

},

/**

页面相关事件处理函数–监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

css 代码

.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: auto auto;

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-repeat center;

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-repeat center;

background-size: contain;

border: none;

}

.camera_box .saveImg {

background: url('https://cdn.ctoku.com/1232123434231231231.png') no-repeat center;

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%;

}