uni-app 实现自定义拍摄头像功能

野性酷女 2021-09-08 17:34 1944阅读 0赞

<view class="" v-if="showHeader" style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
    			<camera binderror="handleCameraError" device-position="devicePosition" flash="off" style="width: 100%; height: 70vh;" v-if="authCamera">
    				    <cover-image  :src="header" style="width: 100%;height: 60vh;margin-top:5vh ;"></cover-image>
    				
    			</camera>
    			<button type="warn" @tap="takePhotoByHead" style="width: 100%;margin-top: 5vh;">拍照</button>
    			
    			<view class="error-handler" v-if="!authCamera">
    			    <button class="nobtn" openType="openSetting">打开相机授权</button>
    			</view>
    		</view>

data(){
        return {
            authCamera:false,
            showHeader :false,
            ctxHeader:null,
    }
    },
    onShow: function () {
    			var that = this;
    			//获取相机权限
    			uni.getSetting({
    				success(res) {
    				 if (res.authSetting["scope.camera"]) {
    							that.authCamera = true
    				  } else {
    					  that.authCamera = false
    				  }
    				}
    			})
    		 },
    methods: {
    			//拍摄头像
    			takePhotoByHead(){
    				this.showHeader = true//开启拍照
    				let _thats = this;
    				this.ctxHeader = uni.createCameraContext();
    				this.ctxHeader.takePhoto({
    					quality: 'high',
    					success: (res) => {
    						uni.compressImage({
    							src: res.tempImagePath,
    							quality: 90,//压缩比例
    							success: ress => {
    								_thats.newPath  = ress.tempFilePath;//图片
    								_thats.showHeader = false;//关闭拍照
    							}
    						})
    						
    						
    					}
    				});
    			},
    			handleCameraError(){
    			    uni.showToast({
    			      title:'用户拒绝使用摄像头',
    			      icon: 'none'
    			    })
    			  },
    			  reverseCamera(){
    			     this.devicePosition = "back" === this.devicePosition ? "front" : "back"
    			  },
    }

头像框：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70][]

![20201013100051925.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70]: /images/20210908/816f0698482b4741a3dd1373bfe53eb4.png
[20201013100051925.png]: /images/20210908/14a494f86f8140cf9465183e4fdc405d.png