实现

Web OCR SDK 的初始化通过调用属于 WebOCR 类的 .initialize() 函数来完成，该类包含在我们的 QiTechWebOCR 库中。流程分为两个主要步骤：

配置与实例化：准备和配置 SDK 实例。
采集初始化：为最终用户启动文档采集流程。

以下是一个完整示例，展示如何实例化和初始化 SDK，以及每个步骤的详细说明。

完整示例：

<script>
    var htmlComponent = document.getElementById('webOCR')
    var webOCR = new QiTechWebOCR.WebOCR(
        htmlComponent,
        "<WEB_TOKEN>",
        "<SESSION_ID>"
    )
    .setThemeConfiguration(
        {
            "companyLogo": "<PATH_OR_URL_TO_YOUR_COMPANY_LOGO>",
            "backgroundColor": "<BACKGROUND_COLOR_HEX>",
            "fontColor": "<FONT_COLOR_HEX>",
            "buttonColor": "<BUTTON_COLOR_HEX>",
            "fontFamily": "<FONT_FAMILY>"
        }
    )
    .setShowInstructionScreen(true)
    .setShowSuccessScreen(true)
    .setShowAllowedTemplatesScreen(false)
    .setSandboxEnvironment()
    .build()

    function initOCR(document_types) {
        webOCR.initialize(document_types)
        .then((ocr_key) => {
            console.log(ocr_key)
        })
        .catch((error) => {
            console.log(error)
        })
    }

    initOCR(['cnh', 'rg', 'cnh_digital'])

</script>

配置与实例化：

首先，创建 WebOCR 类的新实例。构造函数需要三个必填参数，必须按照下面指定的确切顺序传递：

htmlComponent（String）：您的 DOM 中 SDK 将渲染的 HTML 元素的 id。
webToken（String）：您的 API 使用身份验证 Token。
sessionId（String）：用户会话的唯一标识符。

自定义（可选）

创建实例后，您可以使用以下链式方法来自定义用户体验，使 SDK 的外观与您的应用相符。setShow... 方法允许您决定使用我们 SDK 的默认界面还是实现您自己的界面和指示流程。

setThemeConfiguration（object）：允许自定义 SDK 外观。此方法接受包含以下键的对象：
- companyLogo（String）：您公司徽标的 URL 或路径。
- backgroundColor（String）：十六进制格式的背景颜色（例如：'#FFFFFF'）。
- fontColor（String）：十六进制格式的字体颜色（例如：'#000000'）。
- buttonColor（String）：十六进制格式的按钮颜色（例如：'#0000FF'）。
- fontFamily（String）：要使用的字体系列（例如：'Arial'）。
setShowInstructionScreen（boolean）：定义是否显示初始指示界面。
setShowAllowedTemplateScreen（boolean）：定义是否显示告知可接受文档的界面。我们建议启用此功能或实现此界面的自定义版本，以便用户知道可以提交哪些文档。
setShowSuccessScreen（boolean）：定义是否在采集结束时显示成功界面。
setSandboxEnvironment：将 SDK 配置为指向沙盒（Sandbox）环境。在测试期间使用此方法。

构建

最后，您必须调用 build() 函数，以使用传入的配置实例化 WebOCR 类。有关构造函数的更多信息和详细信息，请参阅构造函数页面。

初始化文档采集

正确配置 WebOCR 实例后，调用 initialize() 方法启动采集流程。此方法接受一个字符串数组作为参数，其中每个字符串代表用户可以提交的文档类型。如果用户尝试提交不在列表中的文档，将显示错误消息，指示其使用有效文档重试。要允许提交未列出的其他文档，请在列表中包含字符串 'others'。

可接受模板表：

名称	类型	描述
cnh	String	采集实体 CNH（折叠），分两步，正面和背面
rg	String	采集实体 RG（折叠），分两步，正面和背面
cin_digital	String	提交由官方应用生成的数字 RG 或数字国家身份证（CIN）（pdf）
rne	String	采集实体 RNE，分两步，正面和背面
crnm	String	采集实体 CRNM，分两步，正面和背面
others	String	用于允许提交上述以外的其他文档

注意

在允许的模板中添加 others 类型会使所有提交的文档都被接受。因此，即使是非官方文档也会被接受。

返回值处理

initialize() 方法返回一个 Promise：

成功：在流程结束时，Promise 将被解析，返回包含 ocr_keys 属性的对象。此属性是已采集图片的密钥（ocr_key）列表。
错误：如果流程中发生任何错误，Promise 将被拒绝。您可以使用 .catch() 方法捕获这些错误。

有关更多详细信息，请参阅 initialize() 函数页面。

函数。

完整示例：​

配置与实例化：​

自定义（可选）​

构建​

初始化文档采集​

可接受模板表：​

返回值处理​