@baturu/parts-ocr-sdk

@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": "左后叶右红叶" }
]