一、效果:
二、文档:
GitHub - tesseract.js
js识别图片中的文字插件 tesseract.js_js 图片文字识别-CSDN博客
三、实现:
1.安装依赖
npm i tesseract.js
npm i image-tools --save
2.引入插件
<template>
<view class="container">
<!-- 选择图片 -->
<button @click="imageOcrRecognition">选择图片</button>
<view v-html="content"></view>
</view>
</template>
<script>
import { pathToBase64, base64ToPath } from 'image-tools'
import { createWorker } from 'tesseract.js';//【法一】worker多线程引入这个(推荐)
import Tesseract from 'tesseract.js'; //【法二】js单线程引入这个(这个识别速度慢)
export default {
data() {
return {
content: '',
}
},
methods: {
imageOcrRecognition() {
const that = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
pathToBase64(res.tempFilePaths[0]).then(base64 => {
//【法一】使用worker线程识别
that.workerTesseract(base64);
//【法二】直接在js线程中识别
// Tesseract.recognize(base64, 'chi_sim', { logger: m => console.log('输出识别中的日志信息:',m) }).then(res) => {
// console.log('识别结果:', res);
// })
})
}
})
},
//【法一】使用worker线程识别
async workerTesseract(base64) {
const worker = await createWorker();
await worker.loadLanguage('chi_sim');// eng(英文) / chi_sim(简体中文) / chi_tra(繁体中文) / eng+chi_sim(英文+简体中文) / (如果有多种语言用+连接即可)
await worker.initialize('chi_sim'); //使用一种语言会快一些,多种语言混合会慢一些
const res = await worker.recognize(base64);
console.log('识别结果:', res); //text是最后识别到的内容
await worker.terminate(); //终止worker线程,节省内存资源
},
}
</script>
四、问题:
const worker = await createWorker({ logger: m => console.log('输出识别中的日志信息:',m) });
报错:
Failed to execute 'postMessage' on 'Worker': [object Object] could not be cloned