码迷,mamicode.com
首页 > 微信 > 详细

uni-app 小程序 前置摄像头

时间:2021-06-19 19:24:30      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:真机   摄像头   method   idt   fill   aspect   scss   path   代码   

在小程序拍照的话,uni.chooseImage()可以直接调取摄像头拍照,而如果要调用前置摄像头,这个api就没有提供了。

在查找官方文档发现,可以通过camera有提供这么一个组件,页面内嵌的区域相机组件。

技术图片

 

页面代码
<!-- 相机拍照 -->
<view class="" v-if="ifPhoto">
    <!-- 相机 -->
    <camera :device-position="convert" flash="off" @error="error"class="camera">    </camera>
    <!-- 操作 -->
    <view class="padding bottom_code flex align-center justify-between">
    <!-- 返回 -->
        <view class="code_button" @click="back">
            <image src="../../static/face/icon_return.png" mode="aspectFill"</image>
        </view>
        <!-- 拍照 -->
        <view class="code_button" @click="takePhoto">
            <image src="../../static/face/icon_phone.png" mode="aspectFill"></image>
        </view>
        <!-- 切换摄像头 -->
        <view class="code_button" @click="showConvert">
            <image src="../../static/face/icon_switch.png" mode="aspectFill"></image>
        </view>
    </view>
</view>
<!-- 照片查看 -->
<view class="" v-else>
    <view class="img_code flex align-center justify-center">
        <image :src="src" mode=""></image>
    </view>
    <!-- 操作 -->
    <view class="padding margin-top flex align-center">
        <button class="cu-btn round bg-green lg" style="width: 350rpx;" @click="anew">重新拍摄</button>
        <button class="cu-btn round bg-yellow lg text-white margin-left" style="width: 350rpx;"@click="uploading">上传</button>
    </view>
</view>
data内容
    //true 拍照 false 查看
    ifPhoto: true,
    //照片
    src: null,
    //前置或后置摄像头,值为front, back
    convert: ‘front‘
JS 放置methods里面
//拍照
takePhoto() {
    const ctx = uni.createCameraContext();
    ctx.takePhoto({
        quality: ‘high‘,
        success: (res) => {
            console.log(res);
            this.src = res.tempImagePath
            if (this.src != null) {
                    this.ifPhoto = false
            }
        }
    });
},
//摄像头启动失败
error(e) {
    console.log(e.detail);
},
//切换摄像头
showConvert() {
    if (this.convert == ‘front‘) {
        // 后置
        this.convert = ‘back‘
    } else {
        // 前置
        this.convert = ‘front‘
    }
},
//返回
back() {
    uni.navigateBack({
        delta: 1
    })
},
//重新
anew() {
    this.ifPhoto = true
},
//上传
uploading() {
    console.log(‘上传‘);
}
css
<style lang="scss">
// 相机
.camera {
    width: 100%;
    height: 100vh;
}

//操作
.bottom_code {
    position: fixed;
    bottom: 10rpx;
    left: 0;
    width: 100%;
    height: 120rpx;
    // background-color: #1CA6EC;
    
    .code_button {
        width: 90rpx;
        height: 90rpx;

        // border-radius: 50%;
        image {
            width: 100%;
            height: 100%;
        }
    }
}
.img_code {
    width: 100%;
    height: 80vh;
    padding-top: 180rpx;
    
    image {
        width: 100%;
        height: 100%;
    }
}
</style>

最后样式 因为是模拟器所以没有 真机调试就可以了

技术图片

uni-app 小程序 前置摄像头

标签:真机   摄像头   method   idt   fill   aspect   scss   path   代码   

原文地址:https://www.cnblogs.com/lovejielive/p/14902926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!