flinfo/dc-App/components/bt-cropper/index.vue

<template>
    <view class="container">
        <bt-cropper class="cropper"  ref="cropper" :imageSrc="imageSrc"></bt-cropper>
     <u-button style="z-index: 999;height: 50px;line-height:50px;position: absolute;bottom: 10px;" text="识别" @click="crop"></u-button>


    </view>

</template>
<script>
	import request from '../../utils/request'
	import { pathToBase64, base64ToPath } from 'image-tools';
	export default {
		data() {
			return {
			imageSrc:null
			};
		},
		onLoad(option) {
			if(option.image){
				this.imageSrc = option.image
				console.log(this.imageSrc);
			}
		},
	   methods:{
	      crop(){
	        // 通过组件定义的ref调用cropper方法，返回一个promise对象
	        this.$refs.cropper.crop().then((base64)=>{
				request({
					url: 'youDaoApi/textOcr',
					method: 'post',
					data:{
						base64:base64
					}
				}).then(res=>{
					if(res.code==200&&res.data&&res.data.length>0){
						uni.$emit('updateOcrText',res.data[0])
						uni.navigateBack()
					}

				})


	        })
	      }
	   }
	}
</script>
<style>
    .container{
        /** 外层一定要指定大小 */
        height:100vh;
    }
	.cropper{
	    /** 外层一定要指定大小 */
	    height:90vh;
	}

</style>