开源应用中心 | 如何快速开发一款文字识别应用

DNSPod
474 阅读3分钟

腾讯云开源应用中心，基于腾讯云产品能力，适配热门开源应用。完全开源，全栈云生，一键使用。

在日常生活中，我们经常会需要将图片里的文字信息提取出来使用，通过人工方式采集的录入方式十分机械且效率低下。其实可以通过OCR技术，将印刷体、手写体的图片进行扫描即可将文字识别并录入系统中。市面上也存在较多OCR识别应用，但不一定能够适用于我们。

接下来，我们将基于开源应用uni-app和腾讯云开源应用插件中心适配的腾讯云文字识别（OCR）插件，快速的开发一款文字识别应用。

预备环境

本次开发基于uni-app框架，需要准备好uni-app开发环境

Uni-app 官网： uniapp.dcloud.net.cn/

Uni-cloud 官网： uniapp.dcloud.net.cn/uniCloud/RE…

HBuilderX： 官方IDE下载地址

腾讯云文字识别（OCR）插件： 官方文档

腾讯云文字识别（OCR）已经适配uni-app 仅需简单关联即可完成应用的封装。

制作方法

  1. 打开Hbuilder IDE 创建uni-app项目并勾选启用uniCloud

image.png

  1. 上传云函数模版

    2.1 查看插件安装指引

    2.2 安装腾讯云插件-云函数模版 选择使用HbuilderX 导入插件

image.png

2.3 在项目中打开 cloudfunctions/tencentcloud-plugin/config.js 文件，将腾讯云的密钥信息配置进去，可以在腾讯云 API 密钥管理 (opens new window)中获取 SecretId、SecretKey 和 APPID；

image.png

2.4 将云函数上传到我们自己的云空间中，如果之前没有过云空间需要先创建再关联云空间，最后执行上传操作。

image.png

  1. 安装腾讯云文字识别（OCR）插件

    3.1 访问腾讯云文字识别（OCR）插件页面选择使用HBuilderX 导入插件

    导入成功后可以看到项目中会新增js_sdk目录，里面有tencentcloud-plugin-ocr目录表明导入成功

  2. 根据自己的需求编写页面UI （贴心提示：访问 github.com/Tencent-Clo… 获得Demo源码）

image.png

  1. 进行api调用 （语言：javascript）

    // 通用文字识别-英文识别使用示例
// 从js_sdk列表中导入需要的api
import { englishOCR } from '@/js_sdk/tencentcloud-plugin-ocr';

export default {
  methods: {
    async eventHandler() {
      try {
        //  图片的网络地址，也可以通过imageBase64参数使用base64形式传入图片，具体可以查看对应api的参数说明
        const img = 'https://ocr-demo-1254418846.cos.ap-guangzhou.myqcloud.com/general/EnglishOCR/EnglishOCR1.jpg'; 
        //  调用api获取识别结果
        const { result } = await englishOCR({imageUrl: img});
      } catch (error) {
        console.log(error);
      }
    }
  }
};

    完成识别

image.png

  1. 可以通过访问腾讯云文字识别（OCR）文档获取更详细的插件使用指南

小结分享

使用uni-app上的OCR插件能快速构建一个支持多客户端的OCR应用。我们在腾讯云开源应用中心，也同时上架了一款uni-app的体验应用，免费开放所有的腾讯云uni-app插件的体验试用。

image.png

image.png

image.png

创作团队

腾讯云开源应用/插件项目由腾讯云中小企业产品中心维护。我们致力将开源社区里的热门应用与腾讯云的各项能力融汇贯通，让用户更便捷快速地开通使用开源社区的各种成果。

更多开源应用免费体验：

app.cloud.tencent.com

更多开源应用插件项目进展：

openapp.qq.com/docs

avatar
文章
阅读
粉丝