小程序自定义相机?其实有些名不副实,因为小程序给提供的接口简单到不能再简单,不给你丝毫修改的机会,能做的不过是在相机上覆盖cover-view、cover-image、canvas之类的,来提升相机的拍照体验。今天说的这个自定义相机是除了增加拍照之前的体验之外,拍照之后也增加了图片的处理,如下
效果:
效果说明:
将一张png覆盖在相机上,拍照后,将这张图片与所拍摄照片通过canvas直接拼接,技术没什么,感觉只要png足够丰富,还是一款蛮不错的应用程序。
体验:
代码:
js
const ctxPuzzle = wx.createCanvasContext("puzzleCanvas", this)
Page({
data:{
cameraInfo: {
width: 0,
height:0,
},
systemInfo:{},
frameImageInfo:{},
devicePosition:'back'
},
onLoad() {
var that = this
that.ctx = wx.createCameraContext()
wx.getSystemInfo({
success: function(res) {
that.setData({
menuButtonBoundingClientRect: wx.getMenuButtonBoundingClientRect(),
systemInfo:res
})
wx.getImageInfo({
src: 'cloud://normal-env-ta6pc.6e6f-normal-env-ta6pc-1300924598/frame/kisspng-pink-butterfly-pink-frame-5a9bce6d7bac80.7134860815201603655066.png',
success:res=>{
console.log(res)
console.log(that.data.systemInfo)
var cameraInfo = {}
cameraInfo.width = that.data.systemInfo.windowWidth
cameraInfo.height = that.data.systemInfo.windowWidth / res.width * res.height
cameraInfo.top = (that.data.systemInfo.windowHeight-cameraInfo.height)/2
that.setData({
cameraInfo:cameraInfo,
frameImageInfo:res
})
console.log(that.data.cameraInfo)
}
})
},
})
},
takePhoto() {
var that = this
that.ctx.takePhoto({
quality: 'high',
success: (res) => {
wx.getImageInfo({
src: res.tempImagePath,
success:res=>{
console.log(res)
ctxPuzzle.drawImage(res.path, 0, res.height*that.data.cameraInfo.top/that.data.systemInfo.windowHeight, res.width, res.height*that.data.cameraInfo.height/that.data.systemInfo.windowHeight, 0, 0, that.data.cameraInfo.width, that.data.cameraInfo.height)
ctxPuzzle.drawImage(that.data.frameImageInfo.path, 0, 0, that.data.frameImageInfo.width, that.data.frameImageInfo.height,0,0,that.data.cameraInfo.width,that.data.cameraInfo.height)
ctxPuzzle.draw()
var timeName = setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'puzzleCanvas',
fileType: "png",
success: function (res) {
// wx.hideLoading()
// that.setData({
// completeImageInfo: res.tempFilePath
// })
wx.previewImage({
urls: [res.tempFilePath],
})
clearTimeout(timeName)
}
})
}, 1000)
}
})
}
})
},
switchCamera(){
if(this.data.devicePosition=="back"){
this.setData({
devicePosition:"front"
})
}else{
this.setData({
devicePosition: 'back'
})
}
},
startRecord() {
this.ctx.startRecord({
success: (res) => {
console.log('startRecord')
}
})
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
})
}
})
},
error(e) {
console.log(e.detail)
},
go2Home() {
wx.navigateBack({
delta: 1,
})
},
})
wxml
<cover-view style="width:{{menuButtonBoundingClientRect.height+20}}px;height:{{menuButtonBoundingClientRect.height-1}}px ;position: fixed;z-index: 3000;opacity:0.5;border-radius:{{menuButtonBoundingClientRect.height/2}}px;border:1rpx solid #ededed;top:{{menuButtonBoundingClientRect.top}}px;left:{{systemInfo.windowWidth-menuButtonBoundingClientRect.right}}px" hover-class="hover-home" class="home" hover-start-time="20" hover-stay-time="70" bindtap="go2Home">
</cover-view>
<cover-image style="position: fixed;z-index: 3001;width:{{menuButtonBoundingClientRect.height-10}}px;height:{{menuButtonBoundingClientRect.height-10}}px;top:{{menuButtonBoundingClientRect.top+5}}px;left:{{systemInfo.windowWidth-menuButtonBoundingClientRect.right+15}}px" src="../navigationBar/utils/home.png" bindtap="go2Home"></cover-image>
<view class="container">
<canvas canvas-id="puzzleCanvas" style="width:{{cameraInfo.width}}px;height:{{cameraInfo.height}}px;position:absolute;left:-999999px"></canvas>
<camera device-position="{{devicePosition}}" flash="off" binderror="error" style="width:100%;height:{{systemInfo.windowHeight}}px;"></camera>
<cover-view class="frame-container">
<cover-view style="width:100%;height:{{cameraInfo.top}}px;background:black"></cover-view>
<cover-image style="width:{{cameraInfo.width}}px;height:{{cameraInfo.height}}px;" src="{{frameImageInfo.path}}"></cover-image>
<cover-view style="width:100%;height:{{cameraInfo.top}}px;background:black"></cover-view>
</cover-view>
<cover-view class="control-container">
</cover-view>
<cover-view style="display: flex;flex-direction: row;justify-content: center;align-items: center;width:130rpx;height:130rpx;border:15rpx solid white;border-radius:80rpx;position:fixed;z-index:2001;bottom:20rpx">
<cover-view class="control-takePhoto" hover-class="control-takePhoto-hover" hover-start-time="20" hover-stay-time="70" style="display: flex;flex-direction: row;justify-content: center;align-items: center;background:white;" bindtap="takePhoto">
</cover-view>
</cover-view>
<cover-image class="control-switch" src="./switch.png" bindtap="switchCamera"></cover-image>
</view>
wxss
page{
background: black
}
.frame-container{
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position:fixed;
z-index:1000;
}
.control-container{
width: 100%;
height: 200rpx;
position:fixed;
z-index:2000;
bottom: 0;
background: black;
opacity: 0.6
}
.control-takePhoto{
width:120rpx;height:120rpx;border-radius:60rpx;
}
.control-takePhoto-hover{
width:110rpx;height:110rpx;border-radius:55rpx;
}
.control-switch{
width:80rpx;height:80rpx;
position:fixed;
z-index:2000;
bottom: 60rpx;
right: 60rpx;
}
.home{
background: white
}
.hover-home{
background: #ededed
}