@baturu/parts-ocr-sdk

巴图鲁手写单 OCR 识别库 📄🔍

接入指南

Vue 2 接入用例

import { createOcrUploader } from '@baturu/parts-ocr-sdk';

// 在 Vue 组件中调用 createOcrUploader 函数创建上传器实例
export default {
  data() {
    return {
      instance: null, // 上传实例
    };
  },
  mounted() {
    this.instance = createOcrUploader(this.$refs.uploader, {
      limit: 6, // 设置最大上传图片数量为 6
      confirmText: '确认结果', // 设置确认按钮的文本
      ocrLoadingImageUrl: 'https://abc.com/loading.gif', // 设置 OCR 识别加载中图片
      onUpload: async (file, progress) => {
        // 处理图片上传逻辑，并更新进度
        const url = await uploadFile({ file }, {
          onUploadProgress: ({ loaded, total }) => {
            progress(loaded / total); // 更新上传进度
          },
        });
        return url; // 返回 url
      },
      onPreview: (imgSrc, index, images) => {
        // 预览图片，这里的 previewImage 函数需自行实现
        previewImage(imgSrc, index, images);
      },
      onOcr: async imgSrc => {
        // 处理 OCR 识别逻辑
        const { model } = await executeOcr({ url: imgSrc });
        return model; // 返回 OCR 识别结果的相关信息
      },
      onConfirm: parts => {
        // 处理确认上传或识别结果的逻辑
        this.$emit('confirm', parts);
      },
      onError: err => {
        // 处理错误逻辑
        this.$message.warning(err.message); // 显示错误消息
      },
    });
  },
  beforeDestroy() {
    // 组件销毁前应同时销毁ocr实例，避免内存泄漏
    this.instance?.destroy();
  },
};

createOcrUploader(element, options)

• element：传入要挂载到的 HTML 元素
• options: 额外配置参数，详见下表，所有参数都是可选的（非必传）

基本参数表格

| 参数 | 类型 | 描述 | | --- | --- |------------------| | limit | Number | 设置最大上传图片数量 | | confirmText | String | 设置确认按钮的文本 | | ocrLoadingImageUrl | String | 设置OCR识别加载中的图片URL |

回调函数监听器表格

| 回调函数 | 类型 | 描述 | | --- | --- |------------------------------------------------------------| | onUpload | Function(file, progress) | 图片上传时的回调函数，需要返回上传图片的URL。接受两个参数：上传的图片和进度更新函数 | | onPreview | Function(imgSrc, index, images) | 图片预览时的回调函数。接受三个参数：图片的源地址、图片在列表中的索引和整个图片列表 | | onOcr | Function(imgSrc) | OCR识别时的回调函数，需要返回OCR识别结果的相关信息。接受一个参数：图片的源地址 | | onConfirm | Function(parts) | 确认上传或识别结果时的回调函数。接受一个参数：确认的部分或识别结果 | | onError | Function(err) | 错误处理回调函数。接受一个参数：错误对象 |

注1：progress 函数用于更新上传进度，参数为 0~1 之间的小数。
注2：images 是一个字符串数组，包含了所有上传的图片的源地址。

onConfirm 中的 parts 回调参数数据示例

[
  { "name": "右前门右后门" },
  { "name": "左后门后杠" },
  { "name": "左后叶右红叶" }
]