您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“node如何實現(xiàn)ocr”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“node如何實現(xiàn)ocr”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
tesserract.js 這個庫提供了多個版本供選擇,我這里使用的是離線的版本tesseract.js-offline,畢竟誰都由網(wǎng)絡(luò)不好的時候。默認(rèn)示例代碼
const { createWorker } = require('tesseract.js');
const path = require('path');
const worker = createWorker({
langPath: path.join(__dirname, '..', 'lang-data'),
logger: m => console.log(m),
});
(async () => {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
const { data: { text } } = await worker.recognize(path.join(__dirname, '..', 'images', 'testocr.png'));
console.log(text);
await worker.terminate();
})();
tesseract.js 離線版本默認(rèn)示例代碼只支持識別英文,如果識別中文,結(jié)果會是一堆問號。但是幸運的是你可以導(dǎo)入多個訓(xùn)練好的語言模型,讓它支持多個語言的識別。
從https://github.com/naptha/tessdata/tree/gh-pages/4.0.0這里下載你需要的對應(yīng)語言模型,放入到根目錄下的lang-data目錄下
我這里選擇了中(chi_sim.traineddata.gz
)日(jpn.traineddata.gz
)英(eng.traineddata.gz
)三國語言模型。
修改代碼中加載和初始化模型的語言項配置,來同時支持中日英三國語言。
await worker.loadLanguage('chi_sim+jpn+eng');
await worker.initialize('chi_sim+jpn+eng');
如果你運行了離線的版本,你會發(fā)現(xiàn)模型的加載和ocr的識別有點慢??梢酝ㄟ^這兩個步驟優(yōu)化。
web項目中,你可以在應(yīng)用一啟動的時候就加載模型,這樣后續(xù)接收到ocr請求的時候就可以不用等待模型加載了。
參照Why I refactor tesseract.js v2?這篇博客,可以通過createScheduler
方法添加多個worker線程來并發(fā)的處理ocr請求。
多線程并發(fā)處理ocr請求示例
const Koa = require('koa')
const Router = require('koa-router')
const router = new Router()
const app = new Koa()
const path = require('path')
const moment = require('moment')
const { createWorker, createScheduler } = require('tesseract.js')
;(async () => {
const scheduler = createScheduler()
for (let i = 0; i < 4; i++) {
const worker = createWorker({
langPath: path.join(__dirname, '.', 'lang-data'),
cachePath: path.join(__dirname, '.'),
logger: m => console.log(`${moment().format('YYYY-MM-DD HH:mm:ss')}-${JSON.stringify(m)}`)
})
await worker.load()
await worker.loadLanguage('chi_sim+jpn+eng')
await worker.initialize('chi_sim+jpn+eng')
scheduler.addWorker(worker)
}
app.context.scheduler = scheduler
})()
router.get('/test', async (ctx) => {
const { data: { text } } = await ctx.scheduler.addJob('recognize', path.join(__dirname, '.', 'images', 'chinese.png'))
// await ctx.scheduler.terminate()
ctx.body = text
})
app.use(router.routes(), router.allowedMethods())
app.listen(3002)
發(fā)起并發(fā)請求,可以看到多個worker再并發(fā)執(zhí)行ocr任務(wù)
ab -n 4 -c 4 localhost:3002/test
效果展示中的前端代碼主要是用了elementui組件和vue-cropper這個組件實現(xiàn)。
vue-cropper組件具體的使用可以參考我的這篇博客vue圖片裁剪:使用vue-cropper做圖片裁剪
ps: 上傳圖片的時候可以先在前端加載上傳圖片的base64,先看到上傳的圖片,再請求后端上傳圖片 ,對用戶的體驗比較好
完整代碼如下
<template>
<div>
<div style="margin-top:30px;height:500px">
<div class="show">
<vueCropper
v-if="imgBase64"
ref="cropper"
:img="imgBase64"
:output-size="option.size"
:output-type="option.outputType"
:info="true"
:full="option.full"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:original="option.original"
:auto-crop="option.autoCrop"
:fixed="option.fixed"
:fixed-number="option.fixedNumber"
:center-box="option.centerBox"
:info-true="option.infoTrue"
:fixed-box="option.fixedBox"
:max-img-size="option.maxImgSize"
style="background-image:none"
@mouseenter.native="enter"
@mouseleave.native="leave"
></vueCropper>
<el-upload
v-else
ref="uploader"
class="avatar-uploader"
drag
multiple
action=""
:show-file-list="false"
:limit="1"
:http-request="upload"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div
class="ocr"
@mouseleave="leaveCard"
>
<el-card
v-for="(item,index) in ocrResult"
:key="index"
class="card-box"
@mouseenter.native="enterCard(item)"
>
<el-form
size="small"
label-width="100px"
label-position="left"
>
<el-form-item label="識別結(jié)果">
<el-input v-model="item.text"></el-input>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
<div style="margin-top:10px">
<el-button
size="small"
type="primary"
style="width:60%"
@click="doOcr"
>
文字識別(OCR)
</el-button>
</div>
</div>
</template>
<script>
import { uploadImage, ocr } from '../utils/api'
export default {
name: 'Ocr',
data () {
return {
imgSrc: '',
imgBase64: '',
option: {
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成圖片的質(zhì)量
outputType: 'jpeg', // 裁剪生成圖片的格式
canScale: false, // 圖片是否允許滾輪縮放
autoCrop: true, // 是否默認(rèn)生成截圖框
fixedBox: false, // 固定截圖框大小 不允許改變
fixed: false, // 是否開啟截圖框?qū)捀吖潭ū壤?
fixedNumber: [7, 5], // 截圖框的寬高比例
full: true, // 是否輸出原圖比例的截圖
canMove: false, // 時候可以移動原圖
canMoveBox: true, // 截圖框能否拖動
original: false, // 上傳圖片按照原始比例渲染
centerBox: true, // 截圖框是否被限制在圖片里面
infoTrue: true, // true 為展示真實輸出圖片寬高 false 展示看到的截圖框?qū)捀?
maxImgSize: 10000
},
ocrResult: []
}
},
methods: {
upload (fileObj) {
const file = fileObj.file
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = () => {
this.imgBase64 = reader.result
}
const formData = new FormData()
formData.append('image', file)
uploadImage(formData).then(res => {
this.imgUrl = res.imgUrl
})
},
doOcr () {
const cropAxis = this.$refs.cropper.getCropAxis()
const imgAxis = this.$refs.cropper.getImgAxis()
const cropWidth = this.$refs.cropper.cropW
const cropHeight = this.$refs.cropper.cropH
const position = [
(cropAxis.x1 - imgAxis.x1) / this.$refs.cropper.scale,
(cropAxis.y1 - imgAxis.y1) / this.$refs.cropper.scale,
cropWidth / this.$refs.cropper.scale,
cropHeight / this.$refs.cropper.scale
]
const rectangle = {
top: position[1],
left: position[0],
width: position[2],
height: position[3]
}
if (this.imgUrl) {
ocr({ imgUrl: this.imgUrl, rectangle }).then(res => {
this.ocrResult.push(
{
text: res.text,
cropInfo: { //截圖框顯示的大小
width: cropWidth,
height: cropHeight,
left: cropAxis.x1,
top: cropAxis.y1
},
realInfo: rectangle //截圖框在圖片上真正的大小
})
})
}
},
enterCard (item) {
this.$refs.cropper.goAutoCrop()// 重新生成自動裁剪框
this.$nextTick(() => {
// if cropped and has position message, update crop box
// 設(shè)置自動裁剪框的寬高和位置
this.$refs.cropper.cropOffsertX = item.cropInfo.left
this.$refs.cropper.cropOffsertY = item.cropInfo.top
this.$refs.cropper.cropW = item.cropInfo.width
this.$refs.cropper.cropH = item.cropInfo.height
})
},
leaveCard () {
this.$refs.cropper.clearCrop()
},
enter () {
if (this.imgBase64 === '') {
return
}
this.$refs.cropper.startCrop() // 開始裁剪
},
leave () {
this.$refs.cropper.stopCrop()// 停止裁剪
}
}
}
</script>
讀到這里,這篇“node如何實現(xiàn)ocr”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。