微信小程序拍照，调用相机，模仿相机APP

微信小程序拍照

实现拍照，切换摄像头，图片预览，拍照动画

先看效果

wxml

<!--调用相机拍照-->
<view class="page-container">
    <view class='top'>
        <view class='mask1 {{ka? "ka" : "" }}'></view>
        <view class='mask2 {{ka? "ka" : "" }}'></view>
        <camera class="camera" wx:if="{{isAuth}}" device-position="{{devicePosition}}" flash="off" binderror="error" />
    </view>
    <view class="line" />
    <view class='bottom'>
        <view class='item' bindtap="preview">
            <image class='img' src="{{src}}" mode="aspectFill" />
        </view>
        <view class='item'>
            <view class='button' bindtap="takePhoto" hover-class="hover" hover-stop-propagation hover-start-time='0' hover-stay-time='200'> </view>
        </view>
        <view class='item' bindtap="change" mode="widthFix" hover-class="hover" hover-stop-propagation hover-start-time='0' hover-stay-time='200'>
            <image class='shotCut' src="img/shotCut.svg"  />
        </view>
    </view>
</view>

scss

/* pages/camera/camera.wxss */
.page-container {
    height: 100vh;
    width: 100vw;
    background: #F4F4F4;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .top {
        width: 100%;
        flex: 1;
        position: relative;

        .camera {
            width: 100%;
            height: 100%;
        }

        @keyframes ka {
            0% {
                height: 0;
            }

            50% {
                height: 50%;
            }

            100% {
                height: 0%;
            }
        }

        .mask1 {
            position: absolute;
            width: 100%;
            height: 0%;
            background-color: rgba($color: #000000, $alpha: 0.5);
            z-index: 10;

            &.ka {
                animation: ka 0.2s;
            }
        }

        .mask2 {
            position: absolute;
            width: 100%;
            height: 0%;
            background-color: rgba($color: #000000, $alpha: 0.5);
            transform: rotate(180de);
            bottom: 0;
            z-index: 10;

            &.ka {
                animation: ka 0.2s;
            }
        }
    }

    .line {
        background-color: #F4F4F4;
        height: 1rpx;
        width: 100%;
    }

    .bottom {
        display: grid;
        height: 300rpx;
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        align-items: center; //垂直方向
        background-color: white;

        .item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            .img {
                width: 120rpx;
                height: 120rpx;
                border: 1px solid #CDCDCD;
                border-radius: 10rpx;
                overflow: hidden;
            }

            &.hover {
                .shotCut {
                    width: 80rpx;
                    height: 80rpx;
                    background-color: #F0F0F0;
                    border-radius: 10rpx;
                }
            }

            .shotCut {
                width: 80rpx;
                height: 80rpx;
            }

            .button {
                background-color: white;
                width: 120rpx;
                height: 120rpx;
                justify-content: center;
                align-items: center;
                background-color: #CDCDCD;
                border: 6px solid #e0e0e0;
                border-radius: 60rpx;
                box-sizing: border-box;

                &.hover {
                    background-color: white;
                }
            }
        }
    }
}

ts

// pages/camera/camera.ts
Page({
    /**
     * 页面的初始数据
     */
    data: {
        isAuth: false,
        src: '',
        devicePosition: "back",
        ka: false
    },
    //切换摄像头
    change() {
        let position = this.data.devicePosition === 'front' ? "back" : 'front';
        this.setData({ devicePosition: position })
    },
    //预览
    preview() {
        wx.previewImage({
            current: this.data.src, 
            urls: [this.data.src] 
        })
    },
    takePhoto() {
        this.setData({ ka: true })
        setTimeout(() => {
            this.setData({
                ka: false
            })
        }, 200);
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                let tempImagePath = res.tempImagePath
                this.setData({
                    src: tempImagePath
                })
                //保存到本地相册
                // wx.saveFile({
                //     tempFilePath: tempImagePath,
                //     success: function (res) {
                //       //返回保存时的临时路径 res.savedFilePath
                //       const savedFilePath = res.savedFilePath
                //       // 保存到本地相册
                //       wx.saveImageToPhotosAlbum({
                //         filePath: savedFilePath,
                //         success(res) {
                //             console.log("保存成功",res)
                //          },
                //          fail(res) {
                //             console.log("保存失败",res)
                //          }
                //       })
                //     },
                //     //保存失败回调（比如内存不足）
                //     fail: console.log
                //   })
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        const _this = this
        wx.getSetting({
            success: res => {
                if (res.authSetting['scope.camera']) {
                    // 用户已经授权
                    _this.setData({
                        isAuth: true
                    })
                } else {
                    // 用户还没有授权，向用户发起授权请求
                    wx.authorize({
                        scope: 'scope.camera',
                        success() { // 用户同意授权
                            _this.setData({
                                isAuth: true
                            })
                        },
                        fail() { // 用户不同意授权
                            _this.openSetting().then(res => {
                                _this.setData({
                                    isAuth: true
                                })
                            })
                        }
                    })
                }
            },
            fail: res => {
                console.log('获取用户授权信息失败')
            }
        })
    },
    // 打开授权设置界面
    openSetting() {
        const _this = this
        let promise = new Promise((resolve, reject) => {
            wx.showModal({
                title: '授权',
                content: '请先授权获取摄像头权限',
                success(res) {
                    if (res.confirm) {
                        wx.openSetting({
                            success(res) {
                                if (res.authSetting['scope.camera']) { // 用户打开了授权开关
                                    resolve(true)
                                } else { // 用户没有打开授权开关， 继续打开设置页面
                                    _this.openSetting().then(res => {
                                        resolve(true)
                                    })
                                }
                            },
                            fail(res) {
                                console.log(res)
                            }
                        })
                    } else if (res.cancel) {
                        _this.openSetting().then(res => {
                            resolve(true)
                        })
                    }
                }
            })
        })
        return promise;
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },