@areb0s/ocr-browser 1.0.0

package/build/FileUtils.d.ts

@@ -0,0 +1,4 @@
+import { FileUtilsBase } from '@areb0s/ocr-common';
+export declare class FileUtils extends FileUtilsBase {
+    static read(url: string): Promise<string>;
+}

package/build/FileUtils.js

@@ -0,0 +1,8 @@
+import { FileUtilsBase } from '@areb0s/ocr-common';
+export class FileUtils extends FileUtilsBase {
+    static async read(url) {
+        const res = await fetch(url);
+        return await res.text();
+    }
+}
+//# sourceMappingURL=FileUtils.js.map

package/build/FileUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUtils.js","sourceRoot":"","sources":["../src/FileUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,MAAM,OAAO,SAAU,SAAQ,aAAa;IAC1C,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAW;QAC3B,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5B,OAAO,MAAM,GAAG,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;CACF"}

package/build/ImageRaw.d.ts

@@ -0,0 +1,65 @@
+import { ImageRawBase } from '@areb0s/ocr-common';
+import type { ImageRawData, LineImage, SizeOption, BrowserImageInput } from '@areb0s/ocr-common';
+export declare class ImageRaw extends ImageRawBase {
+    #private;
+    data: Uint8ClampedArray;
+    /**
+     * Check if the input is an ImageBitmap
+     */
+    static isImageBitmap(input: unknown): input is ImageBitmap;
+    /**
+     * Check if the input is an HTMLImageElement
+     */
+    static isHTMLImageElement(input: unknown): input is HTMLImageElement;
+    /**
+     * Check if the input is an HTMLCanvasElement
+     */
+    static isHTMLCanvasElement(input: unknown): input is HTMLCanvasElement;
+    /**
+     * Check if the input is an HTMLVideoElement
+     */
+    static isHTMLVideoElement(input: unknown): input is HTMLVideoElement;
+    /**
+     * Check if the input is ImageRawData
+     */
+    static isImageRawData(input: unknown): input is ImageRawData;
+    /**
+     * Universal factory method that accepts all browser image input types
+     * @param input - URL string, ImageRawData, ImageBitmap, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
+     * @returns Promise<ImageRaw>
+     */
+    static from(input: BrowserImageInput): Promise<ImageRaw>;
+    /**
+     * Create ImageRaw from a URL (existing method)
+     */
+    static open(url: string): Promise<ImageRaw>;
+    /**
+     * Create ImageRaw from an ImageBitmap
+     * Note: This method will close the ImageBitmap after conversion to free memory
+     * @param bitmap - ImageBitmap to convert
+     * @returns Promise<ImageRaw>
+     */
+    static fromImageBitmap(bitmap: ImageBitmap): Promise<ImageRaw>;
+    /**
+     * Create ImageRaw from an HTMLImageElement
+     * @param img - HTMLImageElement to convert (must be loaded/decoded)
+     * @returns Promise<ImageRaw>
+     */
+    static fromHTMLImageElement(img: HTMLImageElement): Promise<ImageRaw>;
+    /**
+     * Create ImageRaw from an HTMLCanvasElement
+     * @param canvas - HTMLCanvasElement to convert
+     * @returns Promise<ImageRaw>
+     */
+    static fromHTMLCanvasElement(canvas: HTMLCanvasElement): Promise<ImageRaw>;
+    /**
+     * Create ImageRaw from an HTMLVideoElement (captures current frame)
+     * @param video - HTMLVideoElement to capture from
+     * @returns Promise<ImageRaw>
+     */
+    static fromHTMLVideoElement(video: HTMLVideoElement): Promise<ImageRaw>;
+    constructor({ data, width, height }: ImageRawData);
+    write(path: string): Promise<void>;
+    resize({ width, height }: SizeOption): Promise<this>;
+    drawBox(lineImages: LineImage[]): Promise<this>;
+}

package/build/ImageRaw.js

@@ -0,0 +1,283 @@
+import { ImageRawBase } from '@areb0s/ocr-common';
+import invariant from 'tiny-invariant';
+export class ImageRaw extends ImageRawBase {
+    data;
+    #imageData;
+    #canvas;
+    // ===========================================
+    // Type Guards
+    // ===========================================
+    /**
+     * Check if the input is an ImageBitmap
+     */
+    static isImageBitmap(input) {
+        return typeof ImageBitmap !== 'undefined' && input instanceof ImageBitmap;
+    }
+    /**
+     * Check if the input is an HTMLImageElement
+     */
+    static isHTMLImageElement(input) {
+        return typeof HTMLImageElement !== 'undefined' && input instanceof HTMLImageElement;
+    }
+    /**
+     * Check if the input is an HTMLCanvasElement
+     */
+    static isHTMLCanvasElement(input) {
+        return typeof HTMLCanvasElement !== 'undefined' && input instanceof HTMLCanvasElement;
+    }
+    /**
+     * Check if the input is an HTMLVideoElement
+     */
+    static isHTMLVideoElement(input) {
+        return typeof HTMLVideoElement !== 'undefined' && input instanceof HTMLVideoElement;
+    }
+    /**
+     * Check if the input is ImageRawData
+     */
+    static isImageRawData(input) {
+        return (typeof input === 'object' &&
+            input !== null &&
+            'data' in input &&
+            'width' in input &&
+            'height' in input &&
+            (input.data instanceof Uint8Array || input.data instanceof Uint8ClampedArray));
+    }
+    // ===========================================
+    // Factory Methods
+    // ===========================================
+    /**
+     * Universal factory method that accepts all browser image input types
+     * @param input - URL string, ImageRawData, ImageBitmap, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
+     * @returns Promise<ImageRaw>
+     */
+    static async from(input) {
+        // String (URL or data URL)
+        if (typeof input === 'string') {
+            return ImageRaw.open(input);
+        }
+        // ImageBitmap
+        if (ImageRaw.isImageBitmap(input)) {
+            return ImageRaw.fromImageBitmap(input);
+        }
+        // HTMLImageElement
+        if (ImageRaw.isHTMLImageElement(input)) {
+            return ImageRaw.fromHTMLImageElement(input);
+        }
+        // HTMLCanvasElement
+        if (ImageRaw.isHTMLCanvasElement(input)) {
+            return ImageRaw.fromHTMLCanvasElement(input);
+        }
+        // HTMLVideoElement
+        if (ImageRaw.isHTMLVideoElement(input)) {
+            return ImageRaw.fromHTMLVideoElement(input);
+        }
+        // ImageRawData (fallback)
+        if (ImageRaw.isImageRawData(input)) {
+            return new ImageRaw(input);
+        }
+        throw new Error('Unsupported image input type');
+    }
+    /**
+     * Create ImageRaw from a URL (existing method)
+     */
+    static async open(url) {
+        const image = await imageFromUrl(url);
+        const canvas = document.createElement('canvas');
+        canvasDrawImage(canvas, image, image.naturalWidth, image.naturalHeight);
+        const imageData = canvasGetImageData(canvas);
+        return new ImageRaw({
+            data: imageData.data,
+            width: imageData.width,
+            height: imageData.height,
+        });
+    }
+    /**
+     * Create ImageRaw from an ImageBitmap
+     * Note: This method will close the ImageBitmap after conversion to free memory
+     * @param bitmap - ImageBitmap to convert
+     * @returns Promise<ImageRaw>
+     */
+    static async fromImageBitmap(bitmap) {
+        // Validate bitmap
+        if (bitmap.width === 0 || bitmap.height === 0) {
+            throw new Error('Invalid ImageBitmap: dimensions are zero (bitmap may be closed or neutered)');
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (!ctx) {
+            // Cleanup before throwing
+            try {
+                bitmap.close();
+            }
+            catch {
+                // Ignore if already closed
+            }
+            throw new Error('Failed to create canvas 2D context');
+        }
+        try {
+            ctx.drawImage(bitmap, 0, 0);
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            return new ImageRaw({
+                data: imageData.data,
+                width: imageData.width,
+                height: imageData.height,
+            });
+        }
+        finally {
+            // Always close the bitmap to free memory
+            try {
+                bitmap.close();
+            }
+            catch {
+                // Ignore if already closed or neutered
+            }
+        }
+    }
+    /**
+     * Create ImageRaw from an HTMLImageElement
+     * @param img - HTMLImageElement to convert (must be loaded/decoded)
+     * @returns Promise<ImageRaw>
+     */
+    static async fromHTMLImageElement(img) {
+        // Ensure image is loaded
+        if (!img.complete || img.naturalWidth === 0) {
+            await img.decode();
+        }
+        const canvas = document.createElement('canvas');
+        canvasDrawImage(canvas, img, img.naturalWidth, img.naturalHeight);
+        const imageData = canvasGetImageData(canvas);
+        return new ImageRaw({
+            data: imageData.data,
+            width: imageData.width,
+            height: imageData.height,
+        });
+    }
+    /**
+     * Create ImageRaw from an HTMLCanvasElement
+     * @param canvas - HTMLCanvasElement to convert
+     * @returns Promise<ImageRaw>
+     */
+    static async fromHTMLCanvasElement(canvas) {
+        const imageData = canvasGetImageData(canvas);
+        return new ImageRaw({
+            data: imageData.data,
+            width: imageData.width,
+            height: imageData.height,
+        });
+    }
+    /**
+     * Create ImageRaw from an HTMLVideoElement (captures current frame)
+     * @param video - HTMLVideoElement to capture from
+     * @returns Promise<ImageRaw>
+     */
+    static async fromHTMLVideoElement(video) {
+        if (video.readyState < 2) {
+            throw new Error('Video is not ready. Ensure video has loaded metadata and data.');
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (!ctx) {
+            throw new Error('Failed to create canvas 2D context');
+        }
+        ctx.drawImage(video, 0, 0);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        return new ImageRaw({
+            data: imageData.data,
+            width: imageData.width,
+            height: imageData.height,
+        });
+    }
+    // ===========================================
+    // Constructor & Instance Methods
+    // ===========================================
+    constructor({ data, width, height }) {
+        const newData = Uint8ClampedArray.from(data);
+        super({
+            data: newData,
+            width,
+            height,
+        });
+        const canvas = document.createElement('canvas');
+        const imageData = new ImageData(newData, width, height);
+        canvasPutImageData(canvas, imageData);
+        this.#canvas = canvas;
+        this.#imageData = imageData;
+        this.data = newData; // this.data is undefined without this line
+    }
+    async write(path) {
+        document.body.append(this.#canvas);
+    }
+    async resize({ width, height }) {
+        invariant(width !== undefined || height !== undefined, 'both width and height are undefined');
+        const newWidth = width || Math.round((this.width / this.height) * height);
+        const newHeight = height || Math.round((this.height / this.width) * width);
+        const newCanvas = document.createElement('canvas');
+        canvasDrawImage(newCanvas, this.#canvas, newWidth, newHeight);
+        const newImageData = canvasGetImageData(newCanvas);
+        return this.#apply(newImageData);
+    }
+    async drawBox(lineImages) {
+        this.#ctx.strokeStyle = 'red';
+        for (const lineImage of lineImages) {
+            const [first, ...rests] = lineImage.box;
+            this.#ctx.beginPath();
+            this.#ctx.moveTo(first[0], first[1]);
+            for (const rest of rests) {
+                this.#ctx.lineTo(rest[0], rest[1]);
+            }
+            this.#ctx.closePath();
+            this.#ctx.stroke();
+        }
+        return this;
+    }
+    get #ctx() {
+        return this.#canvas.getContext('2d');
+    }
+    #apply(imageData) {
+        canvasPutImageData(this.#canvas, imageData);
+        this.#imageData = imageData;
+        this.data = imageData.data;
+        this.width = imageData.width;
+        this.height = imageData.height;
+        return this;
+    }
+    #putImageData() {
+        this.#canvas.width = this.width;
+        this.#canvas.height = this.height;
+        this.#ctx.putImageData(this.#imageData, 0, 0);
+        return this;
+    }
+    #drawImage(image, width, height) {
+        canvasDrawImage(this.#canvas, image, width, height);
+        return this;
+    }
+}
+// ===========================================
+// Helper Functions
+// ===========================================
+function canvasDrawImage(canvas, image, width, height) {
+    canvas.width = width || image.width;
+    canvas.height = height || image.height;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+}
+function canvasPutImageData(canvas, imageData, width, height) {
+    const ctx = canvas.getContext('2d');
+    canvas.width = width || imageData.width;
+    canvas.height = height || imageData.height;
+    ctx.putImageData(imageData, 0, 0);
+}
+function canvasGetImageData(canvas) {
+    return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
+}
+async function imageFromUrl(url) {
+    const image = new Image();
+    image.src = url;
+    await image.decode();
+    return image;
+}
+//# sourceMappingURL=ImageRaw.js.map

package/build/ImageRaw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRaw.js","sourceRoot":"","sources":["../src/ImageRaw.ts"],"names":[],"mappings":"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"}

package/build/index.d.ts

@@ -0,0 +1,5 @@
+import Ocr from '@areb0s/ocr-common';
+import { ImageRaw } from './ImageRaw.js';
+export * from '@areb0s/ocr-common';
+export { ImageRaw };
+export default Ocr;

package/build/index.js

@@ -0,0 +1,11 @@
+import Ocr, { registerBackend } from '@areb0s/ocr-common';
+import { splitIntoLineImages } from '@areb0s/ocr-common/splitIntoLineImages';
+import { InferenceSession } from 'onnxruntime-web';
+import { FileUtils } from './FileUtils.js';
+import { ImageRaw } from './ImageRaw.js';
+// Browser doesn't have default models - user must provide model paths via Ocr.create({ models: {...} })
+registerBackend({ FileUtils, ImageRaw, InferenceSession, splitIntoLineImages, defaultModels: undefined });
+export * from '@areb0s/ocr-common';
+export { ImageRaw }; // Export ImageRaw for direct access to static methods (from, fromImageBitmap, etc.)
+export default Ocr;
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,EAAE,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAA;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,wGAAwG;AACxG,eAAe,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAA;AAEzG,cAAc,oBAAoB,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,CAAA,CAAC,oFAAoF;AACxG,eAAe,GAAG,CAAA"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@areb0s/ocr-browser",
+  "version": "1.0.0",
+  "description": "Fork of @gutenye/ocr-browser with ImageBitmap support. High accurate OCR library for Browser based on PaddleOCR and ONNX runtime. Accepts ImageBitmap, HTMLImageElement, HTMLCanvasElement, HTMLVideoElement as input.",
+  "keywords": [
+    "ocr",
+    "paddleocr",
+    "typescript",
+    "onnxruntime",
+    "web",
+    "browser",
+    "imagebitmap"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/areb0s/ocr.git",
+    "directory": "packages/browser"
+  },
+  "exports": {
+    "bun": "./src/index.ts",
+    "node": "./build/index.js",
+    "react-native": "./src/index.ts",
+    "default": "./build/index.js"
+  },
+  "files": [
+    "src",
+    "build",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "npx tsc --project tsconfig.build.json && npx tsc-alias --project tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@areb0s/ocr-common": "1.0.0",
+    "@gutenye/ocr-models": "^1.2.2",
+    "onnxruntime-web": "^1.17.3"
+  }
+}

package/src/FileUtils.ts

@@ -0,0 +1,8 @@
+import { FileUtilsBase } from '@areb0s/ocr-common'
+
+export class FileUtils extends FileUtilsBase {
+  static async read(url: string) {
+    const res = await fetch(url)
+    return await res.text()
+  }
+}

package/src/ImageRaw.ts

@@ -0,0 +1,327 @@
+import { ImageRawBase } from '@areb0s/ocr-common'
+import type { ImageRawData, LineImage, SizeOption, BrowserImageInput } from '@areb0s/ocr-common'
+import invariant from 'tiny-invariant'
+
+export class ImageRaw extends ImageRawBase {
+  data: Uint8ClampedArray
+  #imageData: ImageData
+  #canvas: HTMLCanvasElement
+
+  // ===========================================
+  // Type Guards
+  // ===========================================
+
+  /**
+   * Check if the input is an ImageBitmap
+   */
+  static isImageBitmap(input: unknown): input is ImageBitmap {
+    return typeof ImageBitmap !== 'undefined' && input instanceof ImageBitmap
+  }
+
+  /**
+   * Check if the input is an HTMLImageElement
+   */
+  static isHTMLImageElement(input: unknown): input is HTMLImageElement {
+    return typeof HTMLImageElement !== 'undefined' && input instanceof HTMLImageElement
+  }
+
+  /**
+   * Check if the input is an HTMLCanvasElement
+   */
+  static isHTMLCanvasElement(input: unknown): input is HTMLCanvasElement {
+    return typeof HTMLCanvasElement !== 'undefined' && input instanceof HTMLCanvasElement
+  }
+
+  /**
+   * Check if the input is an HTMLVideoElement
+   */
+  static isHTMLVideoElement(input: unknown): input is HTMLVideoElement {
+    return typeof HTMLVideoElement !== 'undefined' && input instanceof HTMLVideoElement
+  }
+
+  /**
+   * Check if the input is ImageRawData
+   */
+  static isImageRawData(input: unknown): input is ImageRawData {
+    return (
+      typeof input === 'object' &&
+      input !== null &&
+      'data' in input &&
+      'width' in input &&
+      'height' in input &&
+      (input.data instanceof Uint8Array || input.data instanceof Uint8ClampedArray)
+    )
+  }
+
+  // ===========================================
+  // Factory Methods
+  // ===========================================
+
+  /**
+   * Universal factory method that accepts all browser image input types
+   * @param input - URL string, ImageRawData, ImageBitmap, HTMLImageElement, HTMLCanvasElement, or HTMLVideoElement
+   * @returns Promise<ImageRaw>
+   */
+  static async from(input: BrowserImageInput): Promise<ImageRaw> {
+    // String (URL or data URL)
+    if (typeof input === 'string') {
+      return ImageRaw.open(input)
+    }
+
+    // ImageBitmap
+    if (ImageRaw.isImageBitmap(input)) {
+      return ImageRaw.fromImageBitmap(input)
+    }
+
+    // HTMLImageElement
+    if (ImageRaw.isHTMLImageElement(input)) {
+      return ImageRaw.fromHTMLImageElement(input)
+    }
+
+    // HTMLCanvasElement
+    if (ImageRaw.isHTMLCanvasElement(input)) {
+      return ImageRaw.fromHTMLCanvasElement(input)
+    }
+
+    // HTMLVideoElement
+    if (ImageRaw.isHTMLVideoElement(input)) {
+      return ImageRaw.fromHTMLVideoElement(input)
+    }
+
+    // ImageRawData (fallback)
+    if (ImageRaw.isImageRawData(input)) {
+      return new ImageRaw(input)
+    }
+
+    throw new Error('Unsupported image input type')
+  }
+
+  /**
+   * Create ImageRaw from a URL (existing method)
+   */
+  static async open(url: string): Promise<ImageRaw> {
+    const image = await imageFromUrl(url)
+    const canvas = document.createElement('canvas')
+    canvasDrawImage(canvas, image, image.naturalWidth, image.naturalHeight)
+    const imageData = canvasGetImageData(canvas)
+    return new ImageRaw({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+    })
+  }
+
+  /**
+   * Create ImageRaw from an ImageBitmap
+   * Note: This method will close the ImageBitmap after conversion to free memory
+   * @param bitmap - ImageBitmap to convert
+   * @returns Promise<ImageRaw>
+   */
+  static async fromImageBitmap(bitmap: ImageBitmap): Promise<ImageRaw> {
+    // Validate bitmap
+    if (bitmap.width === 0 || bitmap.height === 0) {
+      throw new Error('Invalid ImageBitmap: dimensions are zero (bitmap may be closed or neutered)')
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = bitmap.width
+    canvas.height = bitmap.height
+
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })
+    if (!ctx) {
+      // Cleanup before throwing
+      try {
+        bitmap.close()
+      } catch {
+        // Ignore if already closed
+      }
+      throw new Error('Failed to create canvas 2D context')
+    }
+
+    try {
+      ctx.drawImage(bitmap, 0, 0)
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+
+      return new ImageRaw({
+        data: imageData.data,
+        width: imageData.width,
+        height: imageData.height,
+      })
+    } finally {
+      // Always close the bitmap to free memory
+      try {
+        bitmap.close()
+      } catch {
+        // Ignore if already closed or neutered
+      }
+    }
+  }
+
+  /**
+   * Create ImageRaw from an HTMLImageElement
+   * @param img - HTMLImageElement to convert (must be loaded/decoded)
+   * @returns Promise<ImageRaw>
+   */
+  static async fromHTMLImageElement(img: HTMLImageElement): Promise<ImageRaw> {
+    // Ensure image is loaded
+    if (!img.complete || img.naturalWidth === 0) {
+      await img.decode()
+    }
+
+    const canvas = document.createElement('canvas')
+    canvasDrawImage(canvas, img, img.naturalWidth, img.naturalHeight)
+    const imageData = canvasGetImageData(canvas)
+
+    return new ImageRaw({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+    })
+  }
+
+  /**
+   * Create ImageRaw from an HTMLCanvasElement
+   * @param canvas - HTMLCanvasElement to convert
+   * @returns Promise<ImageRaw>
+   */
+  static async fromHTMLCanvasElement(canvas: HTMLCanvasElement): Promise<ImageRaw> {
+    const imageData = canvasGetImageData(canvas)
+
+    return new ImageRaw({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+    })
+  }
+
+  /**
+   * Create ImageRaw from an HTMLVideoElement (captures current frame)
+   * @param video - HTMLVideoElement to capture from
+   * @returns Promise<ImageRaw>
+   */
+  static async fromHTMLVideoElement(video: HTMLVideoElement): Promise<ImageRaw> {
+    if (video.readyState < 2) {
+      throw new Error('Video is not ready. Ensure video has loaded metadata and data.')
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = video.videoWidth
+    canvas.height = video.videoHeight
+
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })
+    if (!ctx) {
+      throw new Error('Failed to create canvas 2D context')
+    }
+
+    ctx.drawImage(video, 0, 0)
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+
+    return new ImageRaw({
+      data: imageData.data,
+      width: imageData.width,
+      height: imageData.height,
+    })
+  }
+
+  // ===========================================
+  // Constructor & Instance Methods
+  // ===========================================
+
+  constructor({ data, width, height }: ImageRawData) {
+    const newData = Uint8ClampedArray.from(data)
+    super({
+      data: newData,
+      width,
+      height,
+    })
+    const canvas = document.createElement('canvas')
+    const imageData = new ImageData(newData, width, height)
+    canvasPutImageData(canvas, imageData)
+    this.#canvas = canvas
+    this.#imageData = imageData
+    this.data = newData // this.data is undefined without this line
+  }
+
+  async write(path: string) {
+    document.body.append(this.#canvas)
+  }
+
+  async resize({ width, height }: SizeOption) {
+    invariant(width !== undefined || height !== undefined, 'both width and height are undefined')
+    const newWidth = width || Math.round((this.width / this.height) * height!)
+    const newHeight = height || Math.round((this.height / this.width) * width!)
+    const newCanvas = document.createElement('canvas')
+    canvasDrawImage(newCanvas, this.#canvas, newWidth, newHeight)
+    const newImageData = canvasGetImageData(newCanvas)
+    return this.#apply(newImageData)
+  }
+
+  async drawBox(lineImages: LineImage[]) {
+    this.#ctx.strokeStyle = 'red'
+    for (const lineImage of lineImages) {
+      const [first, ...rests] = lineImage.box
+      this.#ctx.beginPath()
+      this.#ctx.moveTo(first[0], first[1])
+      for (const rest of rests) {
+        this.#ctx.lineTo(rest[0], rest[1])
+      }
+      this.#ctx.closePath()
+      this.#ctx.stroke()
+    }
+    return this
+  }
+
+  get #ctx() {
+    return this.#canvas.getContext('2d')!
+  }
+
+  #apply(imageData: ImageData) {
+    canvasPutImageData(this.#canvas, imageData)
+    this.#imageData = imageData
+    this.data = imageData.data
+    this.width = imageData.width
+    this.height = imageData.height
+    return this
+  }
+
+  #putImageData() {
+    this.#canvas.width = this.width
+    this.#canvas.height = this.height
+    this.#ctx.putImageData(this.#imageData, 0, 0)
+    return this
+  }
+
+  #drawImage(image: CanvasImageSource, width?: number, height?: number) {
+    canvasDrawImage(this.#canvas, image, width, height)
+    return this
+  }
+}
+
+// ===========================================
+// Helper Functions
+// ===========================================
+
+function canvasDrawImage(canvas: HTMLCanvasElement, image: CanvasImageSource, width?: number, height?: number) {
+  canvas.width = width || (image as any).width
+  canvas.height = height || (image as any).height
+  const ctx = canvas.getContext('2d')!
+  ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+}
+
+function canvasPutImageData(canvas: HTMLCanvasElement, imageData: ImageData, width?: number, height?: number) {
+  const ctx = canvas.getContext('2d')!
+  canvas.width = width || imageData.width
+  canvas.height = height || imageData.height
+  ctx.putImageData(imageData, 0, 0)
+}
+
+function canvasGetImageData(canvas: HTMLCanvasElement) {
+  return canvas.getContext('2d')!.getImageData(0, 0, canvas.width, canvas.height)
+}
+
+async function imageFromUrl(url: string) {
+  const image = new Image()
+  image.src = url
+  await image.decode()
+  return image
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+import Ocr, { registerBackend } from '@areb0s/ocr-common'
+import { splitIntoLineImages } from '@areb0s/ocr-common/splitIntoLineImages'
+import { InferenceSession } from 'onnxruntime-web'
+import { FileUtils } from './FileUtils'
+import { ImageRaw } from './ImageRaw'
+
+// Browser doesn't have default models - user must provide model paths via Ocr.create({ models: {...} })
+registerBackend({ FileUtils, ImageRaw, InferenceSession, splitIntoLineImages, defaultModels: undefined })
+
+export * from '@areb0s/ocr-common'
+export { ImageRaw } // Export ImageRaw for direct access to static methods (from, fromImageBitmap, etc.)
+export default Ocr