【js】js识别图片中的文字插件 tesseract.js:

文章目录

        • 一、效果:
        • 二、文档:
        • 三、实现:
            • 1.安装依赖
            • 2.引入插件
        • 四、问题:


一、效果:

【js】js识别图片中的文字插件 tesseract.js:_第1张图片

二、文档:

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

你可能感兴趣的:(软件与插件,javascript,前端,开发语言)