vue+tesseract.js 实现识别图片转为文字功能

以vue-element-admin为例：

//一、安装tesseract.js
npm install tesseract.js

html：

<template>
  <div class="app1-container" v-loading="onceDialogLoading" :element-loading-text="loadingText">
    <div class="filter-container">
      <el-form ref="form" :inline="true" label-position="right" >
        <div class="upload-item">
          <div class="title">图片识别</div>
          <div class="upload">
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false" :limit="3" :on-change="changeImg">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                  </span>
                </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body>
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
        <div class="form-item-box">
          <el-form-item label="识别内容" style="width:100%;">
            <el-input type="textarea" :rows="5" v-model="queryData.onceKeyword"
            ref="onceInput" style="width:100%" placeholder="识别的内容"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

JS部分：

<script>
    import { createWorker } from 'tesseract.js';
  let worker = null
  export default {
    name: 'onceInsert',
    data() {
      return {
        onceDialogLoading:false,
        queryData:{
          onceKeyword:'',
          dwbm:''
        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        loadingText:'拼命加载中',
      }
    },
    mounted() {
      worker = createWorker({
        logger: m => {
          if(m.status === 'recognizing text' && m.progress == 1){
            this.$message.success('图片识别完成')
            this.onceDialogLoading = false
          }
        }
      });
    },
    methods: {
      imageToText(url){
        (async () => {
          await worker.load();
          await worker.loadLanguage('chi_sim');
          await worker.initialize('chi_sim');
          const { data: { text } } = await worker.recognize(url);
          //转小写并去除空格
          let content = text.toLowerCase().replace(/\s*/g, '')
          this.queryData.onceKeyword += content
          console.log(text)
        })();
      },
      changeImg(file, fileList){
        if(fileList.length>0){
          this.loadingText = '正在识别图片,请稍后......'
          this.onceDialogLoading = true
          this.imageToText(file.url)
        }
      },
   }
}
</script>

最后：

项目打包放服务器后发现第一次转换时由于中文语言包太大，导致太耗时了，花了几分钟才把中文包加载完成，所以把语言包放到public目录下，这样相对就快了很多

具体步骤：

一、下载语言包，并放入到公共目录一般最多只需要中英文两种就足够了

二、修改node_modules目录下的配置（node_modules/tesseract.js/src/constants/defaultOptions.js）

module.exports = {
  /*
   * default path for downloading *.traineddata
   */
  // langPath: 'https://tessdata.projectnaptha.com/4.0.0',
//改成放置语言包的目录
  langPath: './static/tesseract/lang-data',
  /*
   * Use BlobURL for worker script by default
   * TODO: remove this option
   *
   */
  workerBlobURL: true,
  logger: () => {},
};