vue3+tesseract 图片文字提取

github:https://github.com/naptha/tesseract.js

可实现多语言识别,中英文混合识别demo如下:

<script setup lang="ts">
import Tesseract from "tesseract.js"

// 方式1:
Tesseract.recognize(
  'http://localhost:5173/vue.jpg',
  'eng+chi_sim',
).then((d) => {
  console.log(d.data.text);
}).catch(error =>{
  console.log(error);
});

// 方式2:
(async () => {
  const worker = await Tesseract.createWorker('eng+chi_sim');
  const ret = await worker.recognize('http://localhost:5173/vue.jpg');
  console.log(ret.data.text);
  await worker.terminate();
})();
</script>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一个流行的JavaScript框架,用于构建用户界面。Tesseract.js是一个基于JavaScript的OCR(光学字符识别)库,用于从图像中提取文本。 如果你想在Vue项目中使用Tesseract.js,首先你需要安装Tesseract.js库。你可以通过npm或yarn来安装,具体命令如下: 使用npm: ``` npm install tesseract.js ``` 使用yarn: ``` yarn add tesseract.js ``` 安装完成后,你可以在Vue组件中引入并使用Tesseract.js。以下是一个简单的示例: ```vue <template> <div> <input type="file" @change="handleFileChange" /> <button @click="extractText">提取文本</button> <div>{{ extractedText }}</div> </div> </template> <script> import Tesseract from 'tesseract.js'; export default { data() { return { extractedText: '', }; }, methods: { handleFileChange(event) { const file = event.target.files[0]; this.image = URL.createObjectURL(file); }, async extractText() { const { data: { text } } = await Tesseract.recognize(this.image); this.extractedText = text; }, }, }; </script> ``` 在上面的示例中,我们创建了一个包含一个文件输入框和一个按钮的Vue组件。当用户选择文件后,我们会使用Tesseract.js来提取图像中的文本,并将提取的文本显示在页面上。 请注意,上述代码只是一个简单的示例,你可能需要根据你的具体需求进行适当的修改和调整。另外,为了使Tesseract.js能够正常工作,你可能还需要提供一些语言数据文件。 希望这能帮到你!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值