标签：convert app height width front uni 100% 摄像头

在小程序拍照的话，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>

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

标签：convert,app,height,width,front,uni,100%,摄像头
来源： https://www.cnblogs.com/lovejielive/p/14902926.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。