小程序摄像头使用技巧
小程序社区版主 x837195936（熊晨沣）：做了一个小demo，小程序调用摄像头拍照。拍照时可以选相框，也可以在相机上添加别的饰品、表情等覆盖物。主要是cover-view,cover-image结合camera组件的应用。
index.wxml <view class="container"> <camera device-position='{{devicePosition}}' hidden='{{hideCamara}}' style="width: 100%;height: {{hh}}px;"> <cover-image bindtap='takePhoto' class='ground' src='{{ground}}' mode='aspectFill'></cover-image> <cover-view class='tips' style='opacity: {{tips}};'>点击屏幕任意处拍照</cover-view> <cover-view class='change' bindtap='change'> <cover-image src='../../images/change.png'></cover-image> </cover-view> </camera> <image src='{{photo}}' style='width: 100%;' mode='widthFix'></image> <button class='retoken' bindtap='retoken'>重拍</button> </view>
index.js
//index.js
//获取应用实例
const app = getApp()
const ww = app.globalData.ww;
const hh = app.globalData.hh;
Page({
data: {
ww: ww,
hh: hh,
tips: 0,
hideCamara: false,
devicePosition: 'back',
photo: '',
ground: '../../images/ground.png'
},
onLoad() {
this.ctx = wx.createCameraContext();
this.showTips();
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
photo: res.tempImagePath,
hideCamara: true
});
}
})
},
retoken() {
this.setData({
photo: 0,
hideCamara: false
})
},
change() {
if (this.data.devicePosition == 'back') {
this.setData({
devicePosition: 'front'
})
} else {
this.setData({
devicePosition: 'back'
})
}
},
showTips() {
this.setData({
tips: 1
});
setTimeout(() => {
this.setData({
tips: 0
});
}, 3000);
}
})
app.js
App({
onLaunch: function () {
this.getSize();
},
getSize() {
var that = this;
wx.getSystemInfo({
success: function (res) {
that.globalData.ww = res.windowWidth;
that.globalData.hh = res.windowHeight;
}
})
},
globalData: {
userInfo: null
}
})
效果图
跳坑
1、camare组件是顶级组件，想要在组件上覆盖其他元素需要在<camare>XXXXXX</carame>内部使用cover-view,cover-image才可以。
2、隐藏camera组件需要在camera组件上绑定属性 hidden="{{hideCamera}}" 使用hideCamera属性来控制组件的隐藏显示，其余的opacity,display等都无效。
极乐技术社区