[OCR] Plugin API

Table of Contents

  • EVENT_TYPE
  • on(eventType, listener)
    • parameters:
  • off(eventType, listener)
    • parameters:
  • getHTMLByOCRData(ocrData, type, tableRecognition)
    • Parameters:
    • Return:
    • Example:

EVENT_TYPE

Release 3.0.2401 and above, Release 2.18.2401 and above.

Event types that can be used in the OCR plugin.

You can register or remove listeners for events using the on() and off() methods.

<table> <thead> <tr><th>Event Type</th><th>Description</th></tr> </thead> <tbody> <tr> <td><code>OCR_DATA_CHANGED</code></td> <td>
  • Occurs when OCR Data changes.
  • Values passed as listener parameters:
<table> <thead> <tr><th>Name</th><th>Type</th><th>Description</th></tr> </thead> <tbody> <tr> <td>event</td> <td>object</td> <td>
{
    type: {string},
    editor: {object},
    isSync: {boolean},
    requestData: { url: {string}, file: {file}, page: {number} },
    responseData: { response: {object} },
    cached: {boolean}
}
  • type: Event type
  • editor: Synap Editor object
  • isSync: Whether the listener is sync/async
  • requestData: OCR request data
    • url: OCR request URL
    • file: OCR request file
    • page: OCR request file page number
  • responseData: OCR response data
    • response: OCR server response data
  • cached: Whether cached
</td> </tr> </tbody> </table>

example

var editor = new SynapEditor(id, synapEditorConfig);
var ocr = editor.plugins.ocr;
var EVENT_TYPE = ocr.EVENT_TYPE;
var options = { sync: true }

ocr.on(EVENT_TYPE.OCR_DATA_CHANGED, function (event) {
    console.log(event)
}, options);
</td> </tr> </tbody> </table>

on(eventType, listener)

Registers a listener for events occurring in the OCR plugin.

parameters:

NameTypeDescription
eventTypestringEvent type.
listenerfunctionEvent listener.
optionsobjectSync/async options.

Example:

var editor = new SynapEditor(id, synapEditorConfig);
var ocr = editor.plugins.ocr;
var EVENT_TYPE = ocr.EVENT_TYPE;
var eventListener = function () {};
var options = { sync: true }

ocr.on(EVENT_TYPE.OCR_DATA_CHANGED, eventListener, options);

off(eventType, listener)

Removes a listener for events occurring in the OCR plugin.

parameters:

NameTypeDescription
eventTypestringEvent type.
listenerfunctionEvent listener.

Example:

var editor = new SynapEditor(id, synapEditorConfig);
var ocr = editor.plugins.ocr;
var EVENT_TYPE = ocr.EVENT_TYPE;
var eventListener = function () {};

ocr.off(EVENT_TYPE.OCR_DATA_CHANGED, eventListener);

getHTMLByOCRData(ocrData, type, tableRecognition)

Release 3.0.0 and above, Release 2.18.0 and above.

Generates HTML based on image data extracted through OCR and returns it as a string.

Parameters:

<table> <thead> <tr><th>Name</th><th>Type</th><th>Default</th><th>Description</th></tr> </thead> <tbody> <tr> <td><code>ocrData</code></td> <td>object</td> <td>Default: none (required parameter)</td> <td>Image data extracted through OCR.</td> </tr> <tr> <td><code>type</code></td> <td>string</td> <td>Default: <code>'block'</code></td> <td>

The result Box is the coordinate display type.

  • 'line': OCR data is separated by each line and converted to HTML.
  • 'block': OCR data is divided into blocks and converted to HTML.
</td> </tr> <tr> <td><code>tableRecognition</code></td> <td>boolean</td> <td>Default: <code>false</code></td> <td>

Whether to return information about recognized table areas.

  • true: Recognizes the table structure in documents containing tables and returns them as table tags.
  • false: Does not recognize the table structure separately and treats it as plain text.
</td> </tr> </tbody> </table>

Return:

TypeDescription
stringReturns the generated HTML as a string.

Example:

Converting OCR Data to HTML

var ocrData = { /* Image data extracted through OCR */ };

// For 'line' type
var htmlResultLine = editor.plugins.ocr.getHTMLByOCRData(ocrData, 'line', false);

// For 'block' type
var htmlResultBlock = editor.plugins.ocr.getHTMLByOCRData(ocrData, 'block', false);

// When tableRecognition is set to true
var htmlResultTable = editor.plugins.ocr.getHTMLByOCRData(ocrData, 'block', true);