exam/exam-06173-uni/components/yf-photo-take/yf-photo-take.vue

<template>
	<view>
		<button  type="primary" @tap="takePhoto">拍照人脸识别</button>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		name: 'yf-photo-take',
		props:{
			value: String,
			base64: String
		},
		data() {
			return {
				photo: '',
				photoBase64: ''
			}
		},
		watch:{
			value: {
				handler(val){
					if(!val){
						this.photo = ''
						this.photoBase64 = ''
					}
				}
			},
			
			photo: {
				handler(val){
					this.$emit('input', val)
					this.$emit('update:base64', this.photoBase64)
				}
			}
		},

		methods: {

			// 拍照选图
			takePhoto(){
				
				// #ifdef MP-WEIXIN
				this.mediaChoose()
				// #endif
				
				// #ifndef MP-WEIXIN
				this.imageChoose()
				// #endif
			},
		
		
			// 压缩和处理图片
			compressImage(url){
				
				let that = this
				
				uni.showLoading({
					title: '正在处理图片..'
				})
				
				// #ifndef H5
				uni.compressImage({
				  src: url,
				  width: '500px',
				  height: 'auto',
				  quality: 90,
				  success: res => {
					console.log('uni-压缩：', res.tempFilePath)
					url = res.tempFilePath
					// 转换base64
					pathToBase64(url).then(img => {
						// 去除png文件头
						that.photoBase64 = img.replace(/^data:image\/\w+;base64,/, "");
						that.photo = url
						uni.hideLoading()
					}).catch(error => {
						console.error(error)
						uni.hideLoading()
					})
				  }
				})
				// #endif
				
				
				// #ifdef H5
				pathToBase64(url).then(img => {
					// H5压缩base64
					that.$utils.compressImage(img, 500).then(psd=>{
						// 去除png文件头
						that.photoBase64 = psd.replace(/^data:image\/\w+;base64,/, "");
						that.photo = url
						uni.hideLoading()
					})
				}).catch(error => {
					console.error(error)
					uni.hideLoading()
				})
				// #endif
			},
		
			
			
			// 小程序平台选择图片及压缩
			mediaChoose(){
				
				let that = this
				
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['image'],
				  sourceType: ['camera'],
				  maxDuration: 30,
				  camera: 'front',
				  success(res) {
					  
					let url = ''
					  
					if(res.tempFilePaths){
						url = res.tempFilePaths[0]
					}else{
						url = res.tempFiles[0].tempFilePath
					}
					
					that.compressImage(url);
					
				  }
				})
			},
			
			// H5平台选择图片和压缩
			imageChoose(){
				
				let that = this
				
				uni.chooseImage({
				  	count: 1,
				    sizeType: ['original', 'compressed'],
				    sourceType: ['camera'], //这要注意，camera掉拍照，album是打开手机相册
				    success: (res)=> {
						let url = res.tempFilePaths[0]
						that.compressImage(url);
				    }
				});
			}
			
		}
	}
</script>