1、wxml
<camera class="camera-photo" frame-size="small" device-position="{{devBack}}" flash="off" binderror="error" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;">
<cover-view class="page-flex" style="width:{{info.windowWidth}}px; height:{{info.windowHeight}}px;">
<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr">cover-view>
<cover-view class="page-content" style="height:{{info.windowHeight}}px;">
<cover-view class="page-mask" style="height:{{convasY-60}}px;">cover-view>
<cover-view style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:auto">cover-view>
<cover-view class="page-mask tackPhoto" style="height:{{convasY+60}}px">
<cover-view class="confirm-photo" bindtap="takePhoto">确定cover-view>
<cover-view bindtap="cancelPhoto" class="cancel">取消cover-view>
cover-view>
cover-view>
<cover-view style="height:{{info.windowHeight}}px;" class="page-mask page-mask-lr">cover-view>
cover-view>
<cover-view class="id-card">
请拍摄身份证
<cover-view class="id-card-text">{{maskMsg}}面cover-view>
cover-view>
camera>
<canvas wx:if="{{isCanvas}}" class="canvas-style" canvas-id="myCanvas" style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;">canvas>
<cover-image wx:if="{{isBaseImg}}" class="base-img" mode="aspectFit" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;" src="{{baseImg}}">cover-image>
<cover-view wx:if="{{isSuccess}}" style="width:{{info.windowWidth}}px;height:{{info.windowHeight}}px;" class="success-img">
<cover-image style="width:{{canvasWidth}}px; height:{{canvasHeight}}px;margin:{{convasY-40}}px auto;" src="{{srcCanvasPath}}">cover-image>
<cover-view class="after-img-tips" style="color:#fff">
<cover-view class="back" catchtap="clearPhoto">重新绘制cover-view>
<cover-view class="back" catchtap="confirmBack">绘制完成cover-view>
cover-view>
cover-view>
2、wxss
page{
width: 100%;
height: 100%;
padding: 0;
}
.lary-top{
position: fixed;
z-index: 101;
top: 0;
width: 100%;
background:#3b8bff
}
.camera-photo{
position: fixed;
z-index: 100;
overflow: hidden;
}
.page-flex{
display: flex;
}
.page-mask{
background-color: rgba(0,0,0,0.6);
}
.page-mask-lr{
width: 90rpx;
}
.page-content{
flex:1
}
.tackPhoto{
color:#fff;
display: flex;
align-items: center;
justify-content: center;
}
.confirm-photo{
width: 130rpx;
height: 130rpx;
background-color: #3b8bff;
border-radius: 50%;
text-align: center;
line-height: 130rpx;
}
.cancel{
position: absolute;
right: 90rpx;
}
.id-card{
position: absolute;
font-size: 36rpx;
color: #fff;
top:50%;
right: 40rpx;
display: flex;
align-items: center;
transform-origin: right;
transform: rotate(90deg);
letter-spacing: 8rpx;
}
.id-card-text{
color:#3b8bff;
padding-left: 8rpx;
}
.base-img{
position: fixed;
z-index: 101;
}
.success-img{
position: fixed;
z-index: 101;
background-color: black;
}
.after-img-tips{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
position: fixed;
bottom: 75rpx;
padding-left: 60rpx;
padding-right: 60rpx;
box-sizing: border-box;
}
.back{
width: 141rpx;
height: 141rpx;
}
2、js
const app = getApp()
let ctxWidth = '';
let ctxHeight = '';
let ctx = null; //Camera
let canvaCtx=null;//canvas
Page({
data: {
devBack:'back',
// maskMsg:'人物',
maskMsg:'国徽'
},
onLoad() {
},
onShow() {
this.changeText()
},
changeText() {
wx.getSystemInfo({
success: res => {
let convasX = res.windowWidth / 4; //遮罩层上下的高度(生成canvas的起始横坐标)
let convasY = res.windowHeight / 5; //遮罩层左右的宽度(生成canvas的起始纵坐标)
let canvasWidth = convasX * 3; //中间裁剪部位的宽度
let canvasHeight = convasY * 3; //中间裁剪部位的高度
let convasXL = convasX / 2;
ctxWidth = canvasWidth; //canvas的宽度
ctxHeight = canvasHeight; //canvas的高度
this.setData({
info: res,
canvasWidth,
canvasHeight,
convasX,
convasXL,
convasY
})
}
})
},
takePhoto() {
ctx = wx.createCameraContext(); //初始化camera
ctx.takePhoto({ //生成图片
quality: 'high',
success: (res) => { //得到图片
console.log(res.tempImagePath)
this.takeCanvas(res.tempImagePath)
this.setData({
baseImg: res.tempImagePath,
isBaseImg: true,
isCanvas:true
})
}
})
},
cancelPhoto(){
wx.switchTab({
url: '../tab/tab1/index',
})
},
takeCanvas(path) { //将拍摄的照片绘制到canvas上
wx.getImageInfo({
src: path,
success: imgInfo => {
let {info} = this.data;
let convasX = imgInfo.width / 4;
let convasY = imgInfo.height / 5;
let canvasWidth = convasX * 3;//显示区域宽度
let canvasHeight = convasY * 3;//显示区域高度
let convasXL = convasX / 2;
// 我这里宽度和高度都计算了设备比,其实两个值是一样的 ,计算一个就够了
let prxWidth = info.windowWidth / imgInfo.width;//计算设备比
canvaCtx = wx.createCanvasContext("myCanvas");//自定义组件,需要加this
canvaCtx.drawImage(path,convasXL,(convasY-120),canvasWidth,canvasHeight,0,0,(parseInt(canvasWidth) * prxWidth),(parseInt(canvasHeight) * prxWidth));//绘制到canvas上的位置,canvas的宽高等
canvaCtx.draw(true, () => {
wx.canvasToTempFilePath({
fileType: "jpg",
quality: 0.3,
canvasId: "myCanvas",
success: canvasToPath => {
this.setData({
isSuccess:true,
isBaseImg: false,
isCanvas:false,
baseImg: canvasToPath.tempFilePath,
srcCanvasPath: canvasToPath.tempFilePath
})
}
})
})
}
})
},
clearPhoto(){
canvaCtx.clearRect(0,0,ctxWidth, ctxHeight)
canvaCtx.draw()
this.setData({
srcCanvasPath:"",
isCanvas:false,
isSuccess:false,
isBaseImg:false
})
},
confirmBack(){//确定绘制成功后的操作,根据自己的需求写即可
}
})