微信小程序_图片连拍_闪光灯_手电筒_录制

借助小程序组件 < camera > 实现图片连拍、闪关灯、手电筒功能；

注意： 手电筒功能的实现小程序版本最低版本 2.8.0

直接复制运行代码的小伙伴，记得把下面页面代码中 svg 的文件替换一下

想要了解录制功能的小伙伴，直接看最后的小彩蛋就行

页面代码

<view class="container">
    <view class="container">
        <view class="tui-navigatorbar">
            <view class="conversation-opts">
                <image class="home-box" bindtap="goHomePage" src="../../static/assets/home-page.svg" />
                <view class="light-box" bindtap="checkOpts" data-num="0">
                    <image style="width: 44rpx;height: 44rpx;" src="../../static/assets/take-lights.svg" />
                </view>
                <image bindtap="checkOpts" data-num="1" style="width: 62rpx;height: 62rpx;" src="../../static/assets/take-torch.svg" />
            </view>
        </view>
        <view class="conversation-list-area">
            <camera device-position="{{device}}" flash="{{flashOpt}}" binderror="error" style="width: 100%; height: 100%;"></camera>
        </view>
    </view>

    <view class="bottom-back">
        <view class="bottom-area">
            <view class="btn-show-more">
                <image  wx:if="{{src}}" mode="widthFix" src="{{src}}" style="width: 100%;height: 100%;"></image>
            </view>
            <image class="btn-show-more" bindtap="takePhoto" src="../../static/assets/take-photo-icon.svg" />
            <image class="btn-show-more" bindtap="checkDevice" src="../../static/assets/take-swich.svg" />
        </view>
    </view>
</view>

---

逻辑代码

Page({
    data: {
        flashOpt: 'off',
        device: 'back'
    },
    onLoad() {
        this.ctx = wx.createCameraContext()
    },
    checkDevice(){
        const flag = this.data.device == 'back' ? 'front' : 'back'
        this.setData({
            device: flag
        })
    },
    checkOpts(e){
        if(e.currentTarget.dataset.num === '1'){
            const flag = this.data.flashOpt == 'off' ? 'torch' : 'off'
            this.setData({
                flashOpt: flag
            })
        }else{
            const flag = this.data.flashOpt == 'off' ? 'on' : 'off'
            this.setData({
                flashOpt: flag
            })
        }
    },
    takePhoto() {
        this.ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                    src: res.tempImagePath
                })
            }
        })
    },
    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)
    },
    goHomePage() {
        wx.showToast({
            title: '返回主页',
        })
    },
})

---

css 代码

.container{
    width: 100vw;
    height: 100vh;
    background-color: #F4F5F9;
}

.tui-navigatorbar{
    position: absolute;
    top: 0;
    width: 750rpx;
    height: 176rpx;
    background-color: #006EFF;
}

.conversation-list-area {
    position: absolute;
    width: 100vw;
    height: calc(100vh - 190px);
    top: 176rpx;
}

.conversation-opts{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    height: 48rpx;
    left: 20rpx;
    bottom: 20rpx;
    text-align: right;
}

.home-box{
    margin-right: 10px;
    width: 54rpx;
    height: 54rpx;
}

.light-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
}

.btn-show-more {
    display: flex;
    width: 160rpx;
    height: 160rpx;
    padding-left: 3rpx;
}

.picker {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 96rpx;
}
.bottom-back{
    height: 120px;
    width: 100%;
    background: #006EFF;
    z-index: 3;
}
.bottom-area {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 16rpx;
    /* flex-direction: column;
    position: absolute;
    bottom: 80rpx;
    right: 0;
    left: 0;
    margin: auto;
    justify-content: center;
    */
}

页面展示

至此，小程序连拍、闪光灯、手电筒就结束了，有需要的小伙伴可以参考一下。。。。

小彩蛋

如果有需要录制短视频的小伙伴，可以使用下面的两个 api ；

  startRecord() {
    this.ctx.startRecord({
      success: (res) => {
        console.log('startRecord')
      }
    })
  },
  stopRecord() {
    this.ctx.stopRecord({
      success: (res) => {
        console.log('stopRecord')
      }
    })
  },