标签：uniapp 取景框 title 程序实现 systemInfo content uni windowHeight

此篇幅主要介绍，关于身份证取景框拍照，如何实现及实现代码，其他的银行卡取景框等等一些证件就可以照猫画虎了，使用到的组件有camera、cover-view、cover-image

期望结果

实现逻辑

 首先是当做一个页面而不是组件，需要在pages.json中注册（作为组件时有各种坑，目前还没爬出来）

 接下来就是要劳烦UI小姐姐的地方了，作图和切图

 最后就是处理对拍出来的照片进行旋转展示了（style="{transform:rotateZ(270deg)}"）

具体代码如下

<template>
	<view class="cover-img" :style="{height: windowHeight + 'px'}">
		<camera 
			mode="normal" 
			device-position="back" 
			flash="off"  
			:style="{height:cameraHeight + 'px'}"
			>
			<cover-view class="controls" style="width: 100%;height: 100%;">
				<!-- 头像面 -->
				<cover-image 
					v-if="idcardFrontSide === 'front'" 
					class="icon-w569-h828"
					src="https://www.icode9.com/i/ll/?i=20210126144225906.png" 
				/>
				<!-- 国徽面 -->
				<cover-image 
					v-else
					class="icon-w569-h828"
					src="https://www.icode9.com/i/ll/?i=20210126144317636.png" 
			    />
			</cover-view>
		</camera>
		<view class="bottom font-36-fff">
			<view class="wrap">
				<view class="back" @click="back">取消</view>
				<view @click="takePhoto">
					<image 
                      class="icon-w131-h131"     
                      src="/static/images/index/take_camera_btn_icon.png">
                    </image>
				</view>
				<view @click="chooseImage">
					相册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
    data() {
		return {
			cameraContext: {}	
		};
	},
    onl oad(options) {
	    if(uni.createCameraContext) {
		    this.cameraContext = uni.createCameraContext()
	    }else {
		    // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
		    uni.showModal({
		        title: '提示',
		        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
		    })
	    }
	},
    created() {
        let systemInfo = uni.getSystemInfoSync()
        this.windowHeight = systemInfo.windowHeight
        this.cameraHeight = systemInfo.windowHeight - 80
    },
    methods: {
        // 拍照
		takePhoto() {
			uni.showLoading({
				title:'上传中，请稍候'
			})
			this.cameraContext.takePhoto({
				quality: 'normal',
				success: (res) => {},
				fail: (err) => {
					uni.showToast({
						title:'拍照失败，请检查系统是否授权',
						icon: 'none',
						duration: 1200
					})
				}
			})
		},
        // 从相册选取
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: (res) =>  {},
				fail: (err) => {}
			});
		},
    }
</script>

<style lang="less" scoped>
.icon-w569-h828 {
	width: 569rpx;
	height: 828rpx;
}
.controls {
	position: relative;
    display: flex;
	align-items: center;
	justify-content: center;
}
.bottom {
	width: 100%;
	background-color: #000;
	.wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		padding: 0 73rpx;
	}
}
</style>

有什么问题的可以评论交流。

感觉有用的或者帮助到你的可以收藏、点赞、关注 一键三连。

（有问题需要交流可以加QQ245602951）

标签：uniapp,取景框,title,程序实现,systemInfo,content,uni,windowHeight
来源： https://blog.csdn.net/wz_coming/article/details/113177177

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