xumuocr/pages/index/index.vue

<template>
	<view class="box">
		<view class="header">
			<button @tap="uploadImage" type="primary">拍照或上传图片进行识别</button>
		</view>
		<view class="main">
			<scroll-view scroll-y="true">
				<view style="display: flex;align-items: center;">
					<h4 style="margin-left: 4px;" v-if="content.length>0">识别结果：</h4>
					<text style="color: green;font-weight: bold;font-size: 12px;">{{message}}</text>
				</view>
				<view style="padding: 0 4px;margin-bottom: 100rpx;">
					<text v-for="(item,index) in content" :key="index">
						<p>
							<text selectable="true">{{item.words}}</text>
						</p>
					</text>
				</view>
			</scroll-view>
		</view>
		<view class="footer">
			<button @tap="saveTxt(contentStr)" type="primary" v-if="contentStr!==''" >保存本地</button>
		</view>
	</view>

</template>

<script>
	import {
		getTokenR,
	} from '@/api/index.js'
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/image-tools/index.js'
	export default {
		data() {
			return {
				content: [],
				token: "",
				contentStr: "",
				message: "",
			}
		},
		created() {
			getTokenR().then(res => {
				this.token = res.access_token
			})
		},
		methods: {
			uploadImage() { //   选取照片，进行OCR识别
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						this.contentStr = ""
						this.message = ""
						uni.showLoading({
							title: '正在识别中...'
						});
						// this.src = res.tempFilePaths[0];  //后面还能用到 src 暂且留着
						pathToBase64(res.tempFilePaths[0]).then(res2 => {
							// 下面进行转码
							uni.request({
								url: `https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=${this.token}`,
								data: {
									image: res2,
									language_type: 'ENG', //识别语言类型，默认中英文结合
									detect_direction: true, //检测图像朝向
								},
								method: 'POST',
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: (res) => {
									this.content = res.data.words_result;
									for (const i in res.data.words_result) {
										this.contentStr += res.data.words_result[i]
											.words +
											"\n"
									}
									uni.hideLoading(); //把正在加载中隐藏
								}
							})
						})

					}
				})
			},
			// 保存本地文件txt
			saveTxt(res) {
				let dir = '/A_store';
				let pathUrl = `/A_store/${Date.parse(new Date())}.txt`;
				// #ifdef APP-PLUS
				let environment = plus.android.importClass("android.os.Environment");
				let sdRoot = environment.getExternalStorageDirectory(); //文件夹根目录
				let File = plus.android.importClass("java.io.File");
				let BufferedReader = plus.android.importClass("java.io.BufferedReader");
				let FileReader = plus.android.importClass("java.io.FileReader");
				let FileWriter = plus.android.importClass("java.io.FileWriter");
				let BufferedWriter = plus.android.importClass("java.io.BufferedWriter");
				let OutputStreamWriter = plus.android.importClass("java.io.OutputStreamWriter");
				let FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
				// #endif
				// #ifdef APP-PLUS
				try {
					//不加根目录创建文件(即用相对地址)的话directory.exists()这个判断一值都是false
					let directory = new File(sdRoot + dir);
					if (!directory.exists()) {
						console.log('创建目录')
						directory.mkdirs(); //创建目录
					}
					let file = new File(sdRoot + pathUrl);
					console.log(file.exists())
					if (!file.exists()) {
						file.createNewFile(); //创建文件
					}
					let path = sdRoot + pathUrl
					
					// let writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(path), "UTF-8"));
					// writer.write(res);
					// writer.close();
					
					let fos = new FileWriter(sdRoot + pathUrl, true);
					fos.write(res);
					fos.close();
					uni.showToast({
						icon: "success",
						mask: true,
						title: "保存成功"
					})
					this.message = "（提示：文件存储在本地/A_store/目录下）"
					return true;
				} catch (e) {
					uni.showToast({
						icon: "error",
						mask: true,
						title: "保存失败"
					})
					return false;
				}
				return false;
				//#endif
			},
		}

	}
</script>
<style lang="scss" scoped>
.box {
	position: relative;
	.header,.footer {
		position: fixed;
		width: 100%;
	}
	.header {
		top: 0%;
		z-index: 1000;
	}
	.footer {
		bottom: 0%;
		background: #fff;
	}
	.main {
		position: absolute;
		top: 90rpx;
	}
}

</style>