paddleocr-js
Version:
JavaScript wrapper for PaddleOCR, providing OCR capabilities in browser and Node.js
139 lines (138 loc) • 3.05 kB
TypeScript
import { OCRResult, TableResult, LayoutResult } from "../typings";
/**
* 轻量级OCR结果可视化组件
* 适用于移动设备和性能受限的环境
*/
export declare class LightVisualizer {
private container;
private canvas;
private ctx;
private image;
private result;
private options;
private selectedId;
private mode;
private isReady;
private maxBoxesToRender;
/**
* 创建轻量级OCR结果可视化组件
* @param container 容器元素或其ID
* @param options 可视化选项
*/
constructor(container: string | HTMLElement, options?: Partial<LightVisualizerOptions>);
/**
* 创建结果列表视图
*/
private createResultListView;
/**
* 更新结果列表视图
*/
private updateResultListView;
/**
* 设置触控事件
*/
private setupTouchEvents;
private lastTouchTime;
private lastTouchX;
private lastTouchY;
/**
* 处理触摸开始事件
*/
private handleTouchStart;
/**
* 处理触摸结束事件
*/
private handleTouchEnd;
/**
* 处理点击或轻触
*/
private handleTap;
/**
* 处理点击事件
*/
private handleClick;
/**
* 查找点击位置下的框
*/
private findBoxAtPosition;
/**
* 判断点是否在多边形内
*/
private pointInPolygon;
/**
* 设置响应式处理
*/
private setupResizeHandler;
/**
* 调整画布大小
*/
private resizeCanvas;
/**
* 加载图像
* @param image 图像源
*/
loadImage(image: string | HTMLImageElement | HTMLCanvasElement): Promise<void>;
/**
* 设置OCR结果
* @param result OCR结果
*/
setResult(result: OCRResult | TableResult | LayoutResult): void;
/**
* 设置渲染模式
* @param mode 模式：text, table 或 layout
*/
setMode(mode: "text" | "table" | "layout"): void;
/**
* 渲染结果
*/
render(): void;
/**
* 渲染文本识别结果
*/
private renderText;
/**
* 渲染表格识别结果
*/
private renderTable;
/**
* 渲染版面分析结果
*/
private renderLayout;
/**
* 绘制框
*/
private drawBox;
/**
* 更新选项
* @param options 新选项
*/
updateOptions(options: Partial<LightVisualizerOptions>): void;
/**
* 获取数据URL
*/
toDataURL(type?: string, quality?: number): string;
/**
* 清除结果
*/
clear(): void;
/**
* 销毁组件
*/
dispose(): void;
}
/**
* 轻量级可视化选项接口
*/
export interface LightVisualizerOptions {
width: number;
height: number;
color: string;
textColor: string;
bgColor: string;
fontSize: number;
lineWidth: number;
responsive: boolean;
optimizeForMobile: boolean;
renderMode: "simple" | "list" | "full";
onSelect?: (id: number, item: any) => void;
}