ppu-ocv 1.7.0 → 2.0.0

package/README.md

@@ -11,7 +11,7 @@ const processor = new ImageProcessor(canvas);
 
 const result = processor
   .grayscale()
-  .blur({ size: 5 })
+  .blur({ size: [5, 5] })
   .threshold()
   .invert()
   .dilate({ size: [20, 20], iter: 5 })
@@ -43,13 +43,7 @@ yarn add ppu-ocv
 bun add ppu-ocv
 ```
 
-> [!NOTE]
-> This project is developed and tested primarily with Bun.  
-> Support for Node.js, Deno, or browser environments is **not guaranteed**.  
-> If you choose to use it outside of Bun and encounter any issues, feel free to report them.  
-> I'm open to fixing bugs for other runtimes with community help.
-
-## Usage
+## Usage (Node.js / Bun)
 
 Note that Operation order is matter, you should atleast know some basic in using OpenCV. See the operations table below this.
 
@@ -63,7 +57,7 @@ const canvas = await ImageProcessor.prepareCanvas(image);
 await ImageProcessor.initRuntime();
 
 const processor = new ImageProcessor(canvas);
-processor.grayscale().blur({ size: 5 }).threshold();
+processor.grayscale().blur({ size: [5, 5] }).threshold();
 
 const resultCanvas = processor.toCanvas();
 processor.destroy();
@@ -101,6 +95,80 @@ await canvasToolkit.saveImage({
 
 For more advanced usage, see: [Example usage of ppu-ocv](./examples)
 
+## Web / Browser Support
+
+Starting from v2.0.0, ppu-ocv supports running in the browser. Import from `ppu-ocv/web` instead of `ppu-ocv` to use the browser-native canvas APIs (`HTMLCanvasElement` / `OffscreenCanvas`) instead of `@napi-rs/canvas`.
+
+### With a bundler (Vite, webpack, etc.)
+
+```ts
+import { ImageProcessor, cv } from "ppu-ocv/web";
+
+await ImageProcessor.initRuntime();
+
+// From a file input or fetch
+const response = await fetch("/my-image.jpg");
+const buffer = await response.arrayBuffer();
+
+const canvas = await ImageProcessor.prepareCanvas(buffer);
+const processor = new ImageProcessor(canvas);
+
+processor.grayscale().blur({ size: [5, 5] }).threshold();
+
+const result = processor.toCanvas(); // returns HTMLCanvasElement
+document.body.appendChild(result);
+
+processor.destroy();
+```
+
+### Vanilla HTML (no bundler)
+
+`initRuntime()` automatically loads `@techstark/opencv-js` from the npm CDN if it's not already available. No extra script tags or import maps needed:
+
+```html
+<script type="module">
+  import { ImageProcessor } from "https://cdn.jsdelivr.net/npm/ppu-ocv@2/index.web.js";
+  await ImageProcessor.initRuntime();
+
+  const processor = new ImageProcessor(canvas);
+  processor.grayscale().blur({ size: [5, 5] }).threshold();
+
+  const result = processor.toCanvas();
+  processor.destroy();
+</script>
+```
+
+> **Note:** ES modules require HTTP/HTTPS — use a local server (`npx serve .`) for dev, or deploy to GitHub Pages.
+
+See the [interactive demo](./index.html) for a full working example.
+
+### Node vs Web differences
+
+| Feature | `ppu-ocv` (Node) | `ppu-ocv/web` (Browser) |
+| --- | --- | --- |
+| Canvas backend | `@napi-rs/canvas` | `HTMLCanvasElement` / `OffscreenCanvas` |
+| `CanvasToolkit` | Full (includes `saveImage`, `clearOutput`) | Base only (`crop`, `isDirty`, `drawLine`, `drawContour`) |
+| File I/O | ✅ `saveImage`, `clearOutput` | ❌ Not available (use download links or `toDataURL`) |
+| `ImageProcessor` | ✅ | ✅ Same API |
+| `Contours` | ✅ | ✅ Same API |
+| Image analysis | ✅ | ✅ Same API |
+
+### Platform abstraction
+
+Under the hood, ppu-ocv uses a platform abstraction layer. The `ppu-ocv` entry point auto-registers the Node platform, and `ppu-ocv/web` auto-registers the browser platform. You can also set a custom platform:
+
+```ts
+import { setPlatform, type CanvasPlatform } from "ppu-ocv/web";
+
+const myPlatform: CanvasPlatform = {
+  createCanvas(width, height) { /* ... */ },
+  loadImage(source) { /* ... */ },
+  isCanvas(value) { /* ... */ },
+};
+
+setPlatform(myPlatform);
+```
+
 ## Built-in pipeline operations
 
 To avoid bloat, we only ship essential operations for chaining. Currently shipped operations are:

package/canvas-factory.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Platform abstraction layer for canvas operations.
+ * Allows ppu-ocv to work with both @napi-rs/canvas (Node) and browser canvas APIs.
+ */
+/** Structural type satisfied by both @napi-rs/canvas Canvas and HTMLCanvasElement/OffscreenCanvas */
+export interface CanvasLike {
+    width: number;
+    height: number;
+    getContext(contextId: "2d"): any;
+    toBuffer?: (...args: any[]) => Buffer;
+    toDataURL?: (...args: any[]) => string;
+}
+/** Structural type for 2D rendering context */
+export interface Context2DLike {
+    canvas: any;
+    drawImage(...args: any[]): void;
+    getImageData(sx: number, sy: number, sw: number, sh: number): {
+        data: Uint8ClampedArray;
+        width: number;
+        height: number;
+    };
+    putImageData(imageData: any, dx: number, dy: number): void;
+    createImageData(width: number, height: number): any;
+    beginPath(): void;
+    closePath(): void;
+    moveTo(x: number, y: number): void;
+    lineTo(x: number, y: number): void;
+    stroke(): void;
+    strokeRect(x: number, y: number, w: number, h: number): void;
+    strokeStyle: string | CanvasGradient | CanvasPattern;
+    lineWidth: number;
+}
+/** Platform-specific canvas operations */
+export interface CanvasPlatform {
+    createCanvas(width: number, height: number): CanvasLike;
+    loadImage(source: ArrayBuffer | string): Promise<CanvasLike>;
+    isCanvas(value: unknown): value is CanvasLike;
+}
+/** Register the platform-specific canvas implementation */
+export declare function setPlatform(platform: CanvasPlatform): void;
+/** Get the registered platform. Throws if none has been set. */
+export declare function getPlatform(): CanvasPlatform;

package/canvas-factory.js

@@ -0,0 +1 @@
+let _platform=null;export function setPlatform(platform){_platform=platform}export function getPlatform(){if(!_platform){throw new Error("No canvas platform registered. "+'Import "ppu-ocv" (Node) or "ppu-ocv/web" (browser) to auto-register.')}return _platform}

package/canvas-toolkit.base.d.ts

@@ -0,0 +1,49 @@
+import type { BoundingBox } from "./index.interface.js";
+import type { CanvasLike, Context2DLike } from "./canvas-factory.js";
+import { cv } from "./cv-provider.js";
+/**
+ * Cross-platform base class for canvas manipulation utilities.
+ * Contains only methods that work in both Node and browser environments.
+ */
+export declare class CanvasToolkitBase {
+    protected static _baseInstance: CanvasToolkitBase | null;
+    protected step: number;
+    protected constructor();
+    static getInstance(): CanvasToolkitBase;
+    /**
+     * Crop a part of source canvas and return a new canvas of the cropped part
+     */
+    crop(options: {
+        bbox: BoundingBox;
+        canvas: CanvasLike;
+    }): CanvasLike;
+    /**
+     * Check whether a binary canvas is dirty (full of major color either black or white) or not
+     */
+    isDirty(options: {
+        canvas: CanvasLike;
+        threshold?: number;
+        majorColorThreshold?: number;
+    }): boolean;
+    /**
+     * Draw a non-filled rectangle on the canvas
+     */
+    drawLine(options: {
+        ctx: Context2DLike;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        lineWidth?: number;
+        color?: string;
+    }): void;
+    /**
+     * Draw a contour on the canvas
+     */
+    drawContour(options: {
+        ctx: Context2DLike;
+        contour: cv.Mat;
+        strokeStyle?: string;
+        lineWidth?: number;
+    }): void;
+}

package/canvas-toolkit.base.js

@@ -0,0 +1 @@
+export class CanvasToolkitBase{static _baseInstance=null;step=0;constructor(){}static getInstance(){if(!CanvasToolkitBase._baseInstance){CanvasToolkitBase._baseInstance=new CanvasToolkitBase}return CanvasToolkitBase._baseInstance}crop(options){const{bbox,canvas}=options;let croppedCanvas=getPlatform().createCanvas(bbox.x1-bbox.x0,bbox.y1-bbox.y0);let croppedCtx=croppedCanvas.getContext("2d");croppedCtx.drawImage(canvas,bbox.x0,bbox.y0,bbox.x1-bbox.x0,bbox.y1-bbox.y0,0,0,croppedCanvas.width,croppedCanvas.height);return croppedCanvas}isDirty(options){const{canvas,threshold=127.5,majorColorThreshold=0.97}=options;let whiteCount=0;let blackCount=0;let borderlessCanvas=this.crop({bbox:{x0:canvas.width*0.1,y0:canvas.height*0.1,x1:canvas.width*0.9,y1:canvas.height*0.9},canvas});let ctx=borderlessCanvas.getContext("2d");let colorData=ctx.getImageData(0,0,borderlessCanvas.width,borderlessCanvas.height).data;for(let i=0;i<colorData.length;i+=4){let red=colorData[i];let green=colorData[i+1];let blue=colorData[i+2];if(red>=threshold&&green>=threshold&&blue>=threshold){whiteCount++}else{blackCount++}}let majorColorRatio=Math.max(whiteCount,blackCount)/(blackCount+whiteCount);return majorColorRatio<majorColorThreshold}drawLine(options){const{ctx,x,y,width,height,lineWidth=2,color="blue"}=options;ctx.beginPath();ctx.strokeStyle=color;ctx.lineWidth=lineWidth;ctx.strokeRect(x,y,width,height);ctx.closePath()}drawContour(options){const{ctx,contour,strokeStyle="red",lineWidth=2}=options;let pts=contour.data32S;if(pts.length<4)return;ctx.strokeStyle=strokeStyle;ctx.lineWidth=lineWidth;ctx.beginPath();ctx.moveTo(pts[0],pts[1]);for(let i=2;i<pts.length;i+=2){ctx.lineTo(pts[i],pts[i+1])}ctx.closePath();ctx.stroke()}}import{getPlatform}from"./canvas-factory.js";

package/canvas-toolkit.d.ts

@@ -1,58 +1,13 @@
-import type { BoundingBox, SKRSContext2D } from "./index.js";
-import { Canvas, cv } from "./index.js";
+import type { CanvasLike } from "./canvas-factory.js";
+import { CanvasToolkitBase } from "./canvas-toolkit.base.js";
 /**
- * Singleton class for canvas manipulation utilities
+ * Node.js canvas toolkit with file-system operations.
+ * Extends CanvasToolkitBase with saveImage() and clearOutput().
  */
-export declare class CanvasToolkit {
-    private static instance;
-    private step;
-    /**
-     * Private constructor to prevent direct instantiation
-     */
-    private constructor();
-    /**
-     * Get the singleton instance of CanvasToolkit
-     * @returns The singleton instance
-     * @example
-     * const canvasToolkit = CanvasToolkit.getInstance();
-     */
+export declare class CanvasToolkit extends CanvasToolkitBase {
+    private static _nodeInstance;
+    protected constructor();
     static getInstance(): CanvasToolkit;
-    /**
-     * Crop a part of source canvas and return a new canvas of the cropped part
-     * @param options
-     * @param options.bbox Bounding box of the cropped part
-     * @param options.canvas Source canvas
-     * @returns A new canvas of the cropped part
-     * @example
-     * const croppedCanvas = CanvasToolkit.getInstance().crop({
-     *   bbox: { x0: 10, y0: 10, x1: 100, y1: 100 },
-     *   canvas: sourceCanvas,
-     * });
-     */
-    crop(options: {
-        bbox: BoundingBox;
-        canvas: Canvas;
-    }): Canvas;
-    /**
-     * Check whether a binary canvas is dirty (full of major color either black or white) or not
-     * @param options
-     * @param options.canvas Source canvas
-     * @param options.threshold Threshold for color detection (default: 127.5)
-     * @param options.majorColorThreshold Major color threshold (default: 0.97)
-     * @returns true if the canvas is dirty, false otherwise
-     * @example
-     * const isDirty = CanvasToolkit.getInstance().isDirty({
-     *   canvas: sourceCanvas,
-     *   threshold: 127.5,
-     *   majorColorThreshold: 0.97,
-     * });
-     * console.log(isDirty); // true or false
-     */
-    isDirty(options: {
-        canvas: Canvas;
-        threshold?: number;
-        majorColorThreshold?: number;
-    }): boolean;
     /**
      * Save a canvas to an image file
      * @param options
@@ -67,7 +22,7 @@ export declare class CanvasToolkit {
      * });
      */
     saveImage(options: {
-        canvas: Canvas;
+        canvas: CanvasLike;
         filename: string;
         path: string;
     }): Promise<void>;
@@ -76,38 +31,4 @@ export declare class CanvasToolkit {
      * @param path Path to the output folder (default: "out")
      */
     clearOutput(path?: string): void;
-    /**
-     * Draw a non-filled rectangle on the canvas
-     * @param options
-     * @param options.ctx Canvas rendering context
-     * @param options.x X coordinate of the top-left corner
-     * @param options.y Y coordinate of the top-left corner
-     * @param options.width Width of the rectangle
-     * @param options.height Height of the rectangle
-     * @param options.lineWidth Line width (default: 2)
-     * @param options.color Color of the rectangle (default: "blue")
-     */
-    drawLine(options: {
-        ctx: SKRSContext2D;
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        lineWidth?: number;
-        color?: string;
-    }): void;
-    /**
-     * Draw a contour on the canvas
-     * @param options
-     * @param options.ctx Canvas rendering context
-     * @param options.contour Contour to be drawn
-     * @param options.strokeStyle Stroke color (default: "red")
-     * @param options.lineWidth Line width (default: 2)
-     */
-    drawContour(options: {
-        ctx: SKRSContext2D;
-        contour: cv.Mat;
-        strokeStyle?: string;
-        lineWidth?: number;
-    }): void;
 }

package/canvas-toolkit.js

@@ -1 +1 @@
-export class CanvasToolkit{static instance=null;step=0;constructor(){}static getInstance(){if(!CanvasToolkit.instance){CanvasToolkit.instance=new CanvasToolkit}return CanvasToolkit.instance}crop(options){const{bbox,canvas}=options;let croppedCanvas=createCanvas(bbox.x1-bbox.x0,bbox.y1-bbox.y0);let croppedCtx=croppedCanvas.getContext("2d");croppedCtx.drawImage(canvas,bbox.x0,bbox.y0,bbox.x1-bbox.x0,bbox.y1-bbox.y0,0,0,croppedCanvas.width,croppedCanvas.height);return croppedCanvas}isDirty(options){const{canvas,threshold=127.5,majorColorThreshold=0.97}=options;let whiteCount=0;let blackCount=0;let borderlessCanvas=this.crop({bbox:{x0:canvas.width*0.1,y0:canvas.height*0.1,x1:canvas.width*0.9,y1:canvas.height*0.9},canvas});let ctx=borderlessCanvas.getContext("2d");let colorData=ctx.getImageData(0,0,borderlessCanvas.width,borderlessCanvas.height).data;for(let i=0;i<colorData.length;i+=4){let red=colorData[i];let green=colorData[i+1];let blue=colorData[i+2];if(red>=threshold&&green>=threshold&&blue>=threshold){whiteCount++}else{blackCount++}}let majorColorRatio=Math.max(whiteCount,blackCount)/(blackCount+whiteCount);return majorColorRatio<majorColorThreshold}saveImage(options){const{canvas,filename,path="out"}=options;let folderPath=join(process.cwd(),path);if(!existsSync(folderPath)){mkdirSync(folderPath,{recursive:true})}let filePath=join(folderPath,`${this.step++}. ${filename}.png`);let out=createWriteStream(filePath);let buffer=canvas.toBuffer("image/png");return new Promise((res,rej)=>{out.write(buffer,(err)=>{if(err){rej(err)}else{res()}})})}clearOutput(path="out"){let folderPath=join(process.cwd(),path);if(existsSync(folderPath)){let files=readdirSync(folderPath);for(let file of files){if(file===".gitignore")continue;let filePath=join(folderPath,file);unlinkSync(filePath)}}}drawLine(options){const{ctx,x,y,width,height,lineWidth=2,color="blue"}=options;ctx.beginPath();ctx.strokeStyle=color;ctx.lineWidth=lineWidth;ctx.strokeRect(x,y,width,height);ctx.closePath()}drawContour(options){const{ctx,contour,strokeStyle="red",lineWidth=2}=options;let pts=contour.data32S;if(pts.length<4)return;ctx.strokeStyle=strokeStyle;ctx.lineWidth=lineWidth;ctx.beginPath();ctx.moveTo(pts[0],pts[1]);for(let i=2;i<pts.length;i+=2){ctx.lineTo(pts[i],pts[i+1])}ctx.closePath();ctx.stroke()}}import{createCanvas}from"./index.js";import{createWriteStream,existsSync,mkdirSync,readdirSync,unlinkSync}from"fs";import{join}from"path";
+import{CanvasToolkitBase}from"./canvas-toolkit.base.js";import{createWriteStream,existsSync,mkdirSync,readdirSync,unlinkSync}from"fs";import{join}from"path";export class CanvasToolkit extends CanvasToolkitBase{static _nodeInstance=null;constructor(){super()}static getInstance(){if(!CanvasToolkit._nodeInstance){CanvasToolkit._nodeInstance=new CanvasToolkit}return CanvasToolkit._nodeInstance}saveImage(options){const{canvas,filename,path="out"}=options;let folderPath=join(process.cwd(),path);if(!existsSync(folderPath)){mkdirSync(folderPath,{recursive:true})}let filePath=join(folderPath,`${this.step++}. ${filename}.png`);let out=createWriteStream(filePath);let buffer=canvas.toBuffer("image/png");return new Promise((res,rej)=>{out.write(buffer,(err)=>{if(err){rej(err)}else{res()}})})}clearOutput(path="out"){let folderPath=join(process.cwd(),path);if(existsSync(folderPath)){let files=readdirSync(folderPath);for(let file of files){if(file===".gitignore")continue;let filePath=join(folderPath,file);unlinkSync(filePath)}}}}

package/contours.d.ts

@@ -1,5 +1,6 @@
-import type { BoundingBox, Canvas, Points } from "./index.js";
-import { cv } from "./index.js";
+import type { CanvasLike } from "./canvas-factory.js";
+import { cv } from "./cv-provider.js";
+import type { BoundingBox, Points } from "./index.interface.js";
 export interface ContoursOptions {
     /** The contour retrieval mode. (cv.RETR_...) */
     mode: cv.RetrievalModes;
@@ -62,7 +63,7 @@ export declare class Contours {
      * @returns The four corner points of the contour (topLeft, topRight, bottomLeft, bottomRight) and the bounding box.
      */
     getCornerPoints(options: {
-        canvas: Canvas;
+        canvas: CanvasLike;
         contour?: cv.Mat;
     }): {
         points: Points;

package/contours.js

@@ -1 +1 @@
-export class Contours{contours;constructor(img,options={}){let opts={...defaultOptions(),...options};if(img instanceof cv.Mat){let contours=new cv.MatVector;let hierarchy=new cv.Mat;try{cv.findContours(img,contours,hierarchy,opts.mode,opts.method)}catch(error){throw error}hierarchy.delete();this.contours=contours}else{throw new Error("Invalid img type. Must be cv.Mat.")}}getAll(){return this.contours}getSize(){return this.contours.size()}getFromIndex(index){if(index<this.contours.size()){return this.contours.get(index)}return new cv.Mat}getRect(contour){return cv.boundingRect(contour)}iterate(callback){for(let i=0,len=this.contours.size();i<len;i++){let contour=this.contours.get(i);callback(contour)}return this}getLargestContourArea(){let maxArea=0;let largestContour=null;this.iterate((contour)=>{let area=cv.contourArea(contour);if(area>maxArea){maxArea=area;largestContour=contour}});return largestContour}getCornerPoints(options){const{canvas,contour=this.getLargestContourArea()}=options;let bbox={x0:0,y0:0,x1:canvas.width,y1:canvas.height};if(!contour){return{points:{topLeft:{x:bbox.x0,y:bbox.y0},topRight:{x:bbox.x1,y:bbox.y0},bottomLeft:{x:bbox.x0,y:bbox.y1},bottomRight:{x:bbox.x1,y:bbox.y1}},bbox}}let rect=cv.minAreaRect(contour);let vertices=cv.RotatedRect.points(rect);let points={topLeft:{x:0,y:0},topRight:{x:0,y:0},bottomRight:{x:0,y:0},bottomLeft:{x:0,y:0}};let sums=vertices.map((pt)=>pt.x+pt.y);let diffs=vertices.map((pt)=>pt.y-pt.x);let topLeftIdx=sums.indexOf(Math.min(...sums));let topRightIdx=diffs.indexOf(Math.min(...diffs));let bottomRightIdx=sums.indexOf(Math.max(...sums));let bottomLeftIdx=diffs.indexOf(Math.max(...diffs));if(!vertices[topLeftIdx]||!vertices[topRightIdx]||!vertices[bottomRightIdx]||!vertices[bottomLeftIdx]){return{points:{topLeft:{x:bbox.x0,y:bbox.y0},topRight:{x:bbox.x1,y:bbox.y0},bottomLeft:{x:bbox.x0,y:bbox.y1},bottomRight:{x:bbox.x1,y:bbox.y1}},bbox}}points.topLeft={x:vertices[topLeftIdx].x,y:vertices[topLeftIdx].y};points.topRight={x:vertices[topRightIdx].x,y:vertices[topRightIdx].y};points.bottomRight={x:vertices[bottomRightIdx].x,y:vertices[bottomRightIdx].y};points.bottomLeft={x:vertices[bottomLeftIdx].x,y:vertices[bottomLeftIdx].y};contour.delete();let ensureInBounds=(p)=>{p.x=Math.max(0,Math.min(canvas.width,p.x));p.y=Math.max(0,Math.min(canvas.height,p.y));return p};points.topLeft=ensureInBounds(points.topLeft);points.topRight=ensureInBounds(points.topRight);points.bottomLeft=ensureInBounds(points.bottomLeft);points.bottomRight=ensureInBounds(points.bottomRight);return{points,bbox}}getApproximateRectangleContour(options){const{threshold=0.02,contour=this.getLargestContourArea()}=options??{};if(!contour)return;let epsilon=threshold*cv.arcLength(contour,true);let approxContour=new cv.Mat;cv.approxPolyDP(contour,approxContour,epsilon,true);contour.delete();return approxContour}destroy(){try{this.contours.delete()}catch(error){}}}import{cv}from"./index.js";function defaultOptions(){return{mode:cv.RETR_EXTERNAL,method:cv.CHAIN_APPROX_SIMPLE}}
+export class Contours{contours;constructor(img,options={}){let opts={...defaultOptions(),...options};if(img instanceof cv.Mat){let contours=new cv.MatVector;let hierarchy=new cv.Mat;try{cv.findContours(img,contours,hierarchy,opts.mode,opts.method)}catch(error){throw error}hierarchy.delete();this.contours=contours}else{throw new Error("Invalid img type. Must be cv.Mat.")}}getAll(){return this.contours}getSize(){return this.contours.size()}getFromIndex(index){if(index<this.contours.size()){return this.contours.get(index)}return new cv.Mat}getRect(contour){return cv.boundingRect(contour)}iterate(callback){for(let i=0,len=this.contours.size();i<len;i++){let contour=this.contours.get(i);callback(contour)}return this}getLargestContourArea(){let maxArea=0;let largestContour=null;this.iterate((contour)=>{let area=cv.contourArea(contour);if(area>maxArea){maxArea=area;largestContour=contour}});return largestContour}getCornerPoints(options){const{canvas,contour=this.getLargestContourArea()}=options;let bbox={x0:0,y0:0,x1:canvas.width,y1:canvas.height};if(!contour){return{points:{topLeft:{x:bbox.x0,y:bbox.y0},topRight:{x:bbox.x1,y:bbox.y0},bottomLeft:{x:bbox.x0,y:bbox.y1},bottomRight:{x:bbox.x1,y:bbox.y1}},bbox}}let rect=cv.minAreaRect(contour);let vertices=cv.RotatedRect.points(rect);let points={topLeft:{x:0,y:0},topRight:{x:0,y:0},bottomRight:{x:0,y:0},bottomLeft:{x:0,y:0}};let sums=vertices.map((pt)=>pt.x+pt.y);let diffs=vertices.map((pt)=>pt.y-pt.x);let topLeftIdx=sums.indexOf(Math.min(...sums));let topRightIdx=diffs.indexOf(Math.min(...diffs));let bottomRightIdx=sums.indexOf(Math.max(...sums));let bottomLeftIdx=diffs.indexOf(Math.max(...diffs));if(!vertices[topLeftIdx]||!vertices[topRightIdx]||!vertices[bottomRightIdx]||!vertices[bottomLeftIdx]){return{points:{topLeft:{x:bbox.x0,y:bbox.y0},topRight:{x:bbox.x1,y:bbox.y0},bottomLeft:{x:bbox.x0,y:bbox.y1},bottomRight:{x:bbox.x1,y:bbox.y1}},bbox}}points.topLeft={x:vertices[topLeftIdx].x,y:vertices[topLeftIdx].y};points.topRight={x:vertices[topRightIdx].x,y:vertices[topRightIdx].y};points.bottomRight={x:vertices[bottomRightIdx].x,y:vertices[bottomRightIdx].y};points.bottomLeft={x:vertices[bottomLeftIdx].x,y:vertices[bottomLeftIdx].y};contour.delete();let ensureInBounds=(p)=>{p.x=Math.max(0,Math.min(canvas.width,p.x));p.y=Math.max(0,Math.min(canvas.height,p.y));return p};points.topLeft=ensureInBounds(points.topLeft);points.topRight=ensureInBounds(points.topRight);points.bottomLeft=ensureInBounds(points.bottomLeft);points.bottomRight=ensureInBounds(points.bottomRight);return{points,bbox}}getApproximateRectangleContour(options){const{threshold=0.02,contour=this.getLargestContourArea()}=options??{};if(!contour)return;let epsilon=threshold*cv.arcLength(contour,true);let approxContour=new cv.Mat;cv.approxPolyDP(contour,approxContour,epsilon,true);contour.delete();return approxContour}destroy(){try{this.contours.delete()}catch(error){}}}import{cv}from"./cv-provider.js";function defaultOptions(){return{mode:cv.RETR_EXTERNAL,method:cv.CHAIN_APPROX_SIMPLE}}

package/cv-provider.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Lazy OpenCV accessor.
+ *
+ * In Node (with @techstark/opencv-js installed), `cv` is available after
+ * `import cv from "@techstark/opencv-js"`.
+ *
+ * In the browser, `cv` is set on `globalThis` after OpenCV.js is loaded
+ * (either via a <script> tag or dynamically by `initRuntime()`).
+ *
+ * This module re-exports `cv` as a lazy proxy so that static `import`
+ * resolution does NOT require `@techstark/opencv-js` to be present
+ * as a resolvable bare specifier at module-load time.
+ */
+import type _cvType from "@techstark/opencv-js";
+type CV = typeof _cvType;
+/**
+ * Set the cv instance (called by platform entry points).
+ */
+export declare function setCv(instance: CV): void;
+/**
+ * TypeScript Declaration Merging:
+ * By exporting both a `namespace cv` and a `const cv`, consumers importing `{ cv }`
+ * get BOTH the types (e.g. `cv.Mat`) AND the runtime Proxy object.
+ */
+export declare namespace cv {
+    type Mat = _cvType.Mat;
+    type MatVector = _cvType.MatVector;
+    type Point = _cvType.Point;
+    type Rect = _cvType.Rect;
+    type Size = _cvType.Size;
+    type Scalar = _cvType.Scalar;
+    type AdaptiveThresholdTypes = _cvType.AdaptiveThresholdTypes;
+    type ThresholdTypes = _cvType.ThresholdTypes;
+    type LineTypes = _cvType.LineTypes;
+    type RetrievalModes = _cvType.RetrievalModes;
+    type ContourApproximationModes = _cvType.ContourApproximationModes;
+    type BorderTypes = _cvType.BorderTypes;
+    type InterpolationFlags = _cvType.InterpolationFlags;
+    type ColorConversionCodes = _cvType.ColorConversionCodes;
+    type MorphShapes = _cvType.MorphShapes;
+    type MorphTypes = _cvType.MorphTypes;
+    type int = number;
+}
+export declare const cv: CV;
+export {};

package/cv-provider.js

@@ -0,0 +1 @@
+let _cv=null;function getCv(){if(_cv)return _cv;if(typeof globalThis!=="undefined"&&globalThis.cv){_cv=globalThis.cv||null;return _cv}throw new Error("OpenCV is not loaded. Call ImageProcessor.initRuntime() first.")}export function setCv(instance){_cv=instance;if(typeof globalThis!=="undefined"){globalThis.cv=instance}}export let cv=new Proxy({},{get(_target,prop){if(prop===Symbol.toPrimitive||prop===Symbol.toStringTag){return}return getCv()[prop]},set(_target,prop,value){getCv()[prop]=value;return true},has(_target,prop){try{return prop in getCv()}catch{return false}}});

package/image-analysis.d.ts

@@ -3,13 +3,13 @@
  * !IMPORTANT: Ensure ImageProcessor.initRuntime() has been called successfully
  * once before using any functions from this module.
  */
-import type { Canvas } from "./index.js";
+import type { CanvasLike } from "./canvas-factory.js";
 /**
  * Options for calculating mean Lab lightness.
  */
 export interface CalculateMeanLightnessOptions {
     /** The canvas containing the image to be processed. */
-    canvas: Canvas;
+    canvas: CanvasLike;
     /** The target dimensions for analysis (resizes internally). */
     dimension: {
         width: number;
@@ -32,4 +32,4 @@ export declare function calculateMeanNormalizedLabLightness(options: CalculateMe
  * @returns Mean grayscale value (typically 0-255).
  * @throws Error if OpenCV operations fail.
  */
-export declare function calculateMeanGrayscaleValue(canvas: Canvas): number;
+export declare function calculateMeanGrayscaleValue(canvas: CanvasLike): number;

package/image-analysis.js

@@ -1 +1 @@
-import{ImageProcessor,cv}from"./index.js";export function calculateMeanNormalizedLabLightness(options){const{canvas,dimension}=options;let processor=null;let resized=null;let labImg=null;let channels=null;let L=null;let mask=null;let scalarMat=null;try{processor=new ImageProcessor(canvas);resized=processor.execute("resize",{width:dimension.width,height:dimension.height}).toMat();labImg=new cv.Mat;cv.cvtColor(resized,labImg,cv.COLOR_BGR2Lab);channels=new cv.MatVector;cv.split(labImg,channels);L=channels.get(0);mask=new cv.Mat;let maxLocResult=cv.minMaxLoc(L,mask);let maxPixelValue=maxLocResult.maxVal;if(maxPixelValue===0){return 0}scalarMat=new cv.Mat(L.rows,L.cols,L.type(),new cv.Scalar(maxPixelValue));cv.divide(L,scalarMat,L,1,-1);let meanL=cv.mean(L)[0];return meanL??0}finally{processor?.destroy();labImg?.delete();channels?.delete();L?.delete();mask?.delete();scalarMat?.delete()}}export function calculateMeanGrayscaleValue(canvas){let processor=null;let grayscaleImg=null;try{processor=new ImageProcessor(canvas);grayscaleImg=processor.blur().grayscale().toMat();let mean=cv.mean(grayscaleImg)[0];return mean??0}finally{processor?.destroy()}}
+import{cv}from"./cv-provider.js";import{ImageProcessor}from"./image-processor.js";export function calculateMeanNormalizedLabLightness(options){const{canvas,dimension}=options;let processor=null;let resized=null;let labImg=null;let channels=null;let L=null;let mask=null;let scalarMat=null;try{processor=new ImageProcessor(canvas);resized=processor.execute("resize",{width:dimension.width,height:dimension.height}).toMat();labImg=new cv.Mat;cv.cvtColor(resized,labImg,cv.COLOR_BGR2Lab);channels=new cv.MatVector;cv.split(labImg,channels);L=channels.get(0);mask=new cv.Mat;let maxLocResult=cv.minMaxLoc(L,mask);let maxPixelValue=maxLocResult.maxVal;if(maxPixelValue===0){return 0}scalarMat=new cv.Mat(L.rows,L.cols,L.type(),new cv.Scalar(maxPixelValue));cv.divide(L,scalarMat,L,1,-1);let meanL=cv.mean(L)[0];return meanL??0}finally{processor?.destroy();labImg?.delete();channels?.delete();L?.delete();mask?.delete();scalarMat?.delete()}}export function calculateMeanGrayscaleValue(canvas){let processor=null;let grayscaleImg=null;try{processor=new ImageProcessor(canvas);grayscaleImg=processor.blur().grayscale().toMat();let mean=cv.mean(grayscaleImg)[0];return mean??0}finally{processor?.destroy()}}

package/image-processor.d.ts

@@ -1,6 +1,6 @@
-import { Canvas, cv } from "./index.js";
-import type { AdaptiveThresholdOptions, BlurOptions, BorderOptions, CannyOptions, DilateOptions, ErodeOptions, GrayscaleOptions, InvertOptions, MorphologicalGradientOptions, OperationName, OperationOptions, RequiredOptions, ResizeOptions, RotateOptions, ThresholdOptions, WarpOptions } from "./index.js";
-import type { ConvertOptions } from "./pipeline/index.js";
+import type { CanvasLike } from "./canvas-factory.js";
+import { cv } from "./cv-provider.js";
+import type { AdaptiveThresholdOptions, BlurOptions, BorderOptions, CannyOptions, ConvertOptions, DilateOptions, ErodeOptions, GrayscaleOptions, InvertOptions, MorphologicalGradientOptions, OperationName, OperationOptions, RequiredOptions, ResizeOptions, RotateOptions, ThresholdOptions, WarpOptions } from "./pipeline/index.js";
 type NameWithRequiredOptions = {
     [N in OperationName]: OperationOptions<N> extends RequiredOptions ? N : never;
 }[OperationName];
@@ -11,19 +11,23 @@ export declare class ImageProcessor {
     height: number;
     /**
      * Create an ImageProcessor instance from a Canvas or cv.Mat
-     * @param source Source image as Canvas or cv.Mat
+     * @param source Source image as CanvasLike or cv.Mat
      */
-    constructor(source: Canvas | cv.Mat);
+    constructor(source: CanvasLike | cv.Mat);
     /**
      * Convert array buffer to canvas
      */
-    static prepareCanvas(file: ArrayBuffer): Promise<Canvas>;
+    static prepareCanvas(file: ArrayBuffer): Promise<CanvasLike>;
     /**
      * Convert canvas to array buffer
      */
-    static prepareBuffer(canvas: Canvas): Promise<ArrayBuffer>;
+    static prepareBuffer(canvas: CanvasLike): Promise<ArrayBuffer>;
     /**
-     * Initialize OpenCV runtime, this is recommended to be called before any image processing
+     * Initialize OpenCV runtime. Must be called before any image processing.
+     *
+     * - **Node.js**: Uses `@techstark/opencv-js` from node_modules (loaded by entry point).
+     * - **Browser with bundler**: Resolves `@techstark/opencv-js` via the bundler.
+     * - **Browser without bundler**: Falls back to loading `@techstark/opencv-js` from npm CDN.
      */
     static initRuntime(): Promise<void>;
     /**
@@ -31,47 +35,43 @@ export declare class ImageProcessor {
      * @param operationName Name of the operation (e.g., "resize")
      * @param options Required options for the operation
      */
-    execute<Name extends NameWithRequiredOptions>(operationName: Name, options: OperationOptions<Name>): this;
+    execute<N extends NameWithRequiredOptions>(operationName: N, options: OperationOptions<N>): this;
     /**
-     * Execute a registered pipeline operation where options are optional or have defaults.
-     * @param operationName Name of the operation (e.g., "blur", "grayscale")
-     * @param options Optional or partial options for the operation
+     * Execute a registered pipeline operation that has default options.
+     * @param operationName Name of the operation (e.g., "blur")
+     * @param options Optional override of the default options
      */
-    execute<Name extends NameWithOptionalOptions>(operationName: Name, options?: Partial<OperationOptions<Name>>): this;
+    execute<N extends NameWithOptionalOptions>(operationName: N, options?: Partial<OperationOptions<N>>): this;
     /**
      * Convert image to grayscale
      * @description Usage order: independent
      * @param options Optional configuration for grayscale conversion
      */
     grayscale(options?: Partial<GrayscaleOptions>): this;
-    /**
-     * Invert image colors
-     * @description Usage order: ideally (after) threshold or adaptiveThreshold
-     * @param options Optional configuration for inversion
-     */
-    invert(options?: Partial<InvertOptions>): this;
-    /**
-     * Add border to image
-     * @description Usage order: independent
-     * @param options Border configuration options
-     */
-    border(options?: Partial<BorderOptions>): this;
     /**
      * Bluring image to reduce noise using Gaussian Blur
      * @description Usage order: (ideally after) grayscale
      * @param options Blur configuration options
      */
     blur(options?: Partial<BlurOptions>): this;
-    /** Thresholding to convert image to binary
+    /**
+     * Thresholding to convert image to binary
      * @description Usage order: (after) grayscale (and optionally blur)
      * @param options Thresholding configuration options
      */
     threshold(options?: Partial<ThresholdOptions>): this;
-    /** Adaptive thresholding to convert image to binary
+    /**
+     * Adaptive thresholding to convert image to binary
      * @description Usage order: (after) grayscale (and optionally blur)
      * @param options Adaptive thresholding configuration options
      */
     adaptiveThreshold(options?: Partial<AdaptiveThresholdOptions>): this;
+    /**
+     * Invert image colors
+     * @description Usage order: ideally (after) threshold or adaptiveThreshold
+     * @param options Optional configuration for inversion
+     */
+    invert(options?: Partial<InvertOptions>): this;
     /**
      * Canny edge detection to detect edges in the image
      * @description Usage order: (after) grayscale + blur
@@ -79,11 +79,11 @@ export declare class ImageProcessor {
      */
     canny(options?: Partial<CannyOptions>): this;
     /**
-     * Morphological gradient to highlight the edges in the image
-     * @description Usage order: (after) dilation + erosion (or threshold)
-     * @param options Morphological gradient configuration options
+     * Dilate image to increase the size of the foreground object
+     * @description Usage order: (after) threshold or edge detection
+     * @param options Dilation configuration options
      */
-    morphologicalGradient(options?: Partial<MorphologicalGradientOptions>): this;
+    dilate(options?: Partial<DilateOptions>): this;
     /**
      * Erode image to reduce noise
      * @description Usage order: (after) threshold or edge detection
@@ -91,29 +91,29 @@ export declare class ImageProcessor {
      */
     erode(options?: Partial<ErodeOptions>): this;
     /**
-     * Dilate image to increase the size of the foreground object
-     * @description Usage order: (after) threshold or edge detection
-     * @param options Dilation configuration options
+     * Add border to image
+     * @description Usage order: independent
+     * @param options Border configuration options
      */
-    dilate(options?: Partial<DilateOptions>): this;
+    border(options?: Partial<BorderOptions>): this;
     /**
      * Resize image to a new width and height
      * @description Usage order: independent
-     *  @param options Resize configuration options
+     * @param options Resize configuration options
      */
     resize(options: ResizeOptions): this;
-    /**
-     * Warp image to a new perspective
-     * @description Usage order: independent
-     * @param options Warp configuration options
-     */
-    warp(options: WarpOptions): this;
     /**
      * Rotate image by a given angle
      * @description Usage order: independent
      * @param options Rotate configuration options
      */
     rotate(options: RotateOptions): this;
+    /**
+     * Warp image to a new perspective
+     * @description Usage order: independent
+     * @param options Warp configuration options
+     */
+    warp(options: WarpOptions): this;
     /**
      * Convert image matrix into new matrix type
      * @description Usage order: independent
@@ -121,22 +121,22 @@ export declare class ImageProcessor {
      */
     convert(options: ConvertOptions): this;
     /**
-     * Destroy the image (cv.Mat) stored in image processor state
-     * @kind non-chainable
-     * @returns void
+     * Morphological gradient to highlight the edges in the image
+     * @description Usage order: (after) dilation + erosion (or threshold)
+     * @param options Morphological gradient configuration options
      */
-    destroy(): void;
+    morphologicalGradient(options?: Partial<MorphologicalGradientOptions>): this;
     /**
-     * Convert image to cv.Mat
-     * @kind non-chainable
-     * @returns cv.Mat
+     * Get the result as a cv.Mat
      */
     toMat(): cv.Mat;
     /**
-     * Convert image (cv.Mat) to Canvas
-     * @kind non-chainable
-     * @returns Canvas
+     * Get the result canvas
      */
-    toCanvas(): Canvas;
+    toCanvas(): CanvasLike;
+    /**
+     * Clean up cv.Mat to free memory
+     */
+    destroy(): void;
 }
 export {};

package/image-processor.js

@@ -1 +1 @@
-export class ImageProcessor{img;width;height;constructor(source){if(source instanceof Canvas){let ctx=source.getContext("2d");let imageData=ctx.getImageData(0,0,source.width,source.height);this.img=cv.matFromImageData(imageData);this.width=source.width;this.height=source.height}else if(source instanceof cv.Mat){this.img=source;this.width=source.cols;this.height=source.rows}else{throw new Error("Invalid source type. Must be either Canvas or cv.Mat.")}}static async prepareCanvas(file){if(file instanceof Canvas)return file;let img=await loadImage(file);let canvas=createCanvas(img.width,img.height);let ctx=canvas.getContext("2d");ctx.drawImage(img,0,0);return canvas}static async prepareBuffer(canvas){if(canvas instanceof ArrayBuffer)return canvas;if(typeof canvas.toBuffer==="function"){let buffer=canvas.toBuffer("image/png");let arrayBuffer=new ArrayBuffer(buffer.byteLength);new Uint8Array(arrayBuffer).set(new Uint8Array(buffer));return arrayBuffer}if(typeof canvas.toDataURL==="function"){let dataURL=canvas.toDataURL("image/png");let base64Data=dataURL.replace(/^data:image\/png;base64,/,"");let buffer=Buffer.from(base64Data,"base64");let arrayBuffer=new ArrayBuffer(buffer.byteLength);new Uint8Array(arrayBuffer).set(new Uint8Array(buffer));return arrayBuffer}let ctx=canvas.getContext("2d");let imageData=ctx.getImageData(0,0,canvas.width,canvas.height);let canvasBuffer=new ArrayBuffer(imageData.data.byteLength);new Uint8Array(canvasBuffer).set(new Uint8Array(imageData.data.buffer,imageData.data.byteOffset,imageData.data.byteLength));return canvasBuffer}static async initRuntime(){return new Promise((res)=>{if(cv&&cv.Mat){res()}else{cv["onRuntimeInitialized"]=()=>{res()}}})}execute(operationName,options){if(!registry.hasOperation(operationName)){throw new Error(`Operation "${operationName}" not found`)}try{let result=executeOperation(operationName,this.img,options);this.img=result.img;this.width=result.width;this.height=result.height}catch(error){console.error(`Error executing operation "${operationName}":`,error);throw error}return this}grayscale(options={}){return this.execute("grayscale",options)}invert(options={}){return this.execute("invert",options)}border(options={}){return this.execute("border",options)}blur(options={}){return this.execute("blur",options)}threshold(options={}){return this.execute("threshold",options)}adaptiveThreshold(options={}){return this.execute("adaptiveThreshold",options)}canny(options={}){return this.execute("canny",options)}morphologicalGradient(options={}){return this.execute("morphologicalGradient",options)}erode(options={}){return this.execute("erode",options)}dilate(options={}){return this.execute("dilate",options)}resize(options){return this.execute("resize",options)}warp(options){return this.execute("warp",options)}rotate(options){return this.execute("rotate",options)}convert(options){return this.execute("convert",options)}destroy(){this.img.delete()}toMat(){return this.img}toCanvas(){let canvas=createCanvas(this.width,this.height);let ctx=canvas.getContext("2d");let imgData=ctx.createImageData(this.width,this.height);if(this.img.channels()===1){let data=imgData.data;let gray=new Uint8Array(this.img.data);for(let i=0;i<gray.length;i++){data[i*4]=gray[i];data[i*4+1]=gray[i];data[i*4+2]=gray[i];data[i*4+3]=255}}else{imgData.data.set(new Uint8ClampedArray(this.img.data))}ctx.putImageData(imgData,0,0);return canvas}}import{Canvas,createCanvas,cv,loadImage}from"./index.js";import{executeOperation,registry}from"./index.js";
+export class ImageProcessor{img;width;height;constructor(source){if(getPlatform().isCanvas(source)){let ctx=source.getContext("2d");let imageData=ctx.getImageData(0,0,source.width,source.height);this.img=cv.matFromImageData(imageData);this.width=source.width;this.height=source.height}else if(source instanceof cv.Mat){this.img=source;this.width=source.cols;this.height=source.rows}else{throw new Error("Invalid source type. Must be either Canvas or cv.Mat.")}}static async prepareCanvas(file){if(getPlatform().isCanvas(file))return file;return getPlatform().loadImage(file)}static async prepareBuffer(canvas){if(canvas instanceof ArrayBuffer)return canvas;if(typeof canvas.toBuffer==="function"){let buffer=canvas.toBuffer("image/png");let arrayBuffer=new ArrayBuffer(buffer.byteLength);new Uint8Array(arrayBuffer).set(new Uint8Array(buffer));return arrayBuffer}if(typeof canvas.toDataURL==="function"){let dataURL=canvas.toDataURL("image/png");let base64Data=dataURL.replace(/^data:image\/png;base64,/,"");let binaryString=atob(base64Data);let arrayBuffer=new ArrayBuffer(binaryString.length);let bytes=new Uint8Array(arrayBuffer);for(let i=0;i<binaryString.length;i++){bytes[i]=binaryString.charCodeAt(i)}return arrayBuffer}let ctx=canvas.getContext("2d");let imageData=ctx.getImageData(0,0,canvas.width,canvas.height);let canvasBuffer=new ArrayBuffer(imageData.data.byteLength);new Uint8Array(canvasBuffer).set(new Uint8Array(imageData.data.buffer,imageData.data.byteOffset,imageData.data.byteLength));return canvasBuffer}static async initRuntime(){if(globalThis.cv?.Mat){setCv(globalThis.cv);return}try{let mod=await import("@techstark/opencv-js");let _cv=mod.default||mod;setCv(_cv);if(!_cv.Mat){await new Promise((res)=>{_cv["onRuntimeInitialized"]=()=>res()})}return}catch{}if(typeof document!=="undefined"){await new Promise((resolve,reject)=>{let script=document.createElement("script");script.src="https://cdn.jsdelivr.net/npm/@techstark/opencv-js@4.10.0-release.1/dist/opencv.js";script.async=true;script.onload=()=>{let g=globalThis;if(g.cv?.Mat){setCv(g.cv);resolve()}else if(g.cv){g.cv["onRuntimeInitialized"]=()=>{setCv(g.cv);resolve()}}else{reject(new Error("OpenCV.js loaded but cv not found on globalThis"))}};script.onerror=()=>reject(new Error("Failed to load @techstark/opencv-js from CDN"));document.head.appendChild(script)});return}throw new Error("Cannot initialize OpenCV runtime. Install @techstark/opencv-js or run in a browser.")}execute(operationName,options){let result=executeOperation(operationName,this.img,options);this.img=result.img;this.width=result.width;this.height=result.height;return this}grayscale(options){return this.execute("grayscale",options)}blur(options){return this.execute("blur",options)}threshold(options){return this.execute("threshold",options)}adaptiveThreshold(options){return this.execute("adaptiveThreshold",options)}invert(options){return this.execute("invert",options)}canny(options){return this.execute("canny",options)}dilate(options){return this.execute("dilate",options)}erode(options){return this.execute("erode",options)}border(options){return this.execute("border",options)}resize(options){return this.execute("resize",options)}rotate(options){return this.execute("rotate",options)}warp(options){return this.execute("warp",options)}convert(options){return this.execute("convert",options)}morphologicalGradient(options){return this.execute("morphologicalGradient",options)}toMat(){return this.img}toCanvas(){let platform=getPlatform();let canvas=platform.createCanvas(this.width,this.height);try{cv.imshow(canvas,this.img)}catch(e){let ctx=canvas.getContext("2d");if(!ctx)throw new Error("Could not get 2d context from canvas");let imgData=ctx.createImageData(this.width,this.height);if(this.img.channels()===1){let data=imgData.data;let gray=new Uint8Array(this.img.data);for(let i=0;i<gray.length;i++){data[i*4]=gray[i];data[i*4+1]=gray[i];data[i*4+2]=gray[i];data[i*4+3]=255}}else{imgData.data.set(new Uint8ClampedArray(this.img.data))}ctx.putImageData(imgData,0,0)}return canvas}destroy(){try{this.img.delete()}catch{}}}import{getPlatform}from"./canvas-factory.js";import{cv,setCv}from"./cv-provider.js";import{executeOperation}from"./pipeline/index.js";

package/index.d.ts

@@ -1,9 +1,12 @@
-import cv from "@techstark/opencv-js";
+import { cv } from "./cv-provider.js";
 export { cv };
 export { Canvas, createCanvas, ImageData, loadImage } from "@napi-rs/canvas";
 export type { SKRSContext2D } from "@napi-rs/canvas";
 export type { BoundingBox, Coordinate, Points } from "./index.interface.js";
 export { executeOperation, OperationRegistry, registry, } from "./pipeline/index.js";
+export { getPlatform, setPlatform } from "./canvas-factory.js";
+export type { CanvasLike, CanvasPlatform, Context2DLike, } from "./canvas-factory.js";
+export { CanvasToolkitBase } from "./canvas-toolkit.base.js";
 export { CanvasToolkit } from "./canvas-toolkit.js";
 export { Contours } from "./contours.js";
 export { calculateMeanGrayscaleValue, calculateMeanNormalizedLabLightness, type CalculateMeanLightnessOptions, } from "./image-analysis.js";

package/index.js

@@ -1 +1 @@
-import cv from"@techstark/opencv-js";export{cv};export{Canvas,createCanvas,ImageData,loadImage}from"@napi-rs/canvas";export{executeOperation,OperationRegistry,registry}from"./pipeline/index.js";export{CanvasToolkit}from"./canvas-toolkit.js";export{Contours}from"./contours.js";export{calculateMeanGrayscaleValue,calculateMeanNormalizedLabLightness}from"./image-analysis.js";export{ImageProcessor}from"./image-processor.js";
+import _cv from"@techstark/opencv-js";import{cv,setCv}from"./cv-provider.js";setCv(_cv);export{cv};import{setPlatform}from"./canvas-factory.js";import{nodePlatform}from"./platform/node.js";setPlatform(nodePlatform);export{Canvas,createCanvas,ImageData,loadImage}from"@napi-rs/canvas";export{executeOperation,OperationRegistry,registry}from"./pipeline/index.js";export{getPlatform,setPlatform}from"./canvas-factory.js";export{CanvasToolkitBase}from"./canvas-toolkit.base.js";export{CanvasToolkit}from"./canvas-toolkit.js";export{Contours}from"./contours.js";export{calculateMeanGrayscaleValue,calculateMeanNormalizedLabLightness}from"./image-analysis.js";export{ImageProcessor}from"./image-processor.js";

package/index.web.d.ts

@@ -0,0 +1,12 @@
+import { cv } from "./cv-provider.js";
+export { cv };
+export { getPlatform, setPlatform } from "./canvas-factory.js";
+export type { CanvasLike, CanvasPlatform, Context2DLike, } from "./canvas-factory.js";
+export { webPlatform } from "./platform/web.js";
+export type { BoundingBox, Coordinate, Points } from "./index.interface.js";
+export { executeOperation, OperationRegistry, registry, } from "./pipeline/index.js";
+export { CanvasToolkitBase as CanvasToolkit, CanvasToolkitBase, } from "./canvas-toolkit.base.js";
+export { Contours } from "./contours.js";
+export { calculateMeanGrayscaleValue, calculateMeanNormalizedLabLightness, type CalculateMeanLightnessOptions, } from "./image-analysis.js";
+export { ImageProcessor } from "./image-processor.js";
+export type { AdaptiveThresholdOptions, BlurOptions, BorderOptions, CannyOptions, DilateOptions, ErodeOptions, GrayscaleOptions, InvertOptions, MorphologicalGradientOptions, OperationFunction, OperationName, OperationOptions, OperationResult, PartialOptions, RegisteredOperations, RequiredOptions, ResizeOptions, RotateOptions, ThresholdOptions, WarpOptions, } from "./pipeline/index.js";

package/index.web.js

@@ -0,0 +1 @@
+import{cv}from"./cv-provider.js";export{cv};import{setPlatform}from"./canvas-factory.js";import{webPlatform}from"./platform/web.js";setPlatform(webPlatform);export{getPlatform,setPlatform}from"./canvas-factory.js";export{webPlatform}from"./platform/web.js";export{executeOperation,OperationRegistry,registry}from"./pipeline/index.js";export{CanvasToolkitBase as CanvasToolkit,CanvasToolkitBase}from"./canvas-toolkit.base.js";export{Contours}from"./contours.js";export{calculateMeanGrayscaleValue,calculateMeanNormalizedLabLightness}from"./image-analysis.js";export{ImageProcessor}from"./image-processor.js";

package/operations/adaptive-threshold.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import { cv } from "../cv-provider.js";
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         adaptiveThreshold: AdaptiveThresholdOptions;
     }

package/operations/adaptive-threshold.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{upper:255,method:cv.ADAPTIVE_THRESH_GAUSSIAN_C,type:cv.THRESH_BINARY_INV,size:7,constant:2}}export function adaptiveThreshold(img,options){let imgAdaptiveThreshold=new cv.Mat;cv.adaptiveThreshold(img,imgAdaptiveThreshold,options.upper,options.method,options.type,options.size,options.constant);img.delete();return{img:imgAdaptiveThreshold,width:imgAdaptiveThreshold.cols,height:imgAdaptiveThreshold.rows}}registry.register("adaptiveThreshold",adaptiveThreshold,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{upper:255,method:cv.ADAPTIVE_THRESH_GAUSSIAN_C,type:cv.THRESH_BINARY_INV,size:7,constant:2}}export function adaptiveThreshold(img,options){let imgAdaptiveThreshold=new cv.Mat;cv.adaptiveThreshold(img,imgAdaptiveThreshold,options.upper,options.method,options.type,options.size,options.constant);img.delete();return{img:imgAdaptiveThreshold,width:imgAdaptiveThreshold.cols,height:imgAdaptiveThreshold.rows}}registry.register("adaptiveThreshold",adaptiveThreshold,defaultOptions);

package/operations/blur.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import { cv } from "../cv-provider.js";
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         blur: BlurOptions;
     }

package/operations/blur.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{size:[5,5],sigma:0}}export function blur(img,options){let imgBlur=new cv.Mat;cv.GaussianBlur(img,imgBlur,new cv.Size(options.size[0],options.size[1]),options.sigma);img.delete();return{img:imgBlur,width:imgBlur.cols,height:imgBlur.rows}}registry.register("blur",blur,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{size:[5,5],sigma:0}}export function blur(img,options){let imgBlur=new cv.Mat;cv.GaussianBlur(img,imgBlur,new cv.Size(options.size[0],options.size[1]),options.sigma);img.delete();return{img:imgBlur,width:imgBlur.cols,height:imgBlur.rows}}registry.register("blur",blur,defaultOptions);

package/operations/border.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         border: BorderOptions;
     }

package/operations/border.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{size:10,borderType:cv.BORDER_CONSTANT,borderColor:[255,255,255,255]}}export function border(img,options){let imgBorder=new cv.Mat;cv.copyMakeBorder(img,imgBorder,options.size,options.size,options.size,options.size,options.borderType,options.borderColor);img.delete();return{img:imgBorder,width:imgBorder.cols,height:imgBorder.rows}}registry.register("border",border,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{size:10,borderType:cv.BORDER_CONSTANT,borderColor:[255,255,255,255]}}export function border(img,options){let imgBorder=new cv.Mat;cv.copyMakeBorder(img,imgBorder,options.size,options.size,options.size,options.size,options.borderType,options.borderColor);img.delete();return{img:imgBorder,width:imgBorder.cols,height:imgBorder.rows}}registry.register("border",border,defaultOptions);

package/operations/canny.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         canny: CannyOptions;
     }

package/operations/canny.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{lower:50,upper:150}}export function canny(img,options){let imgCanny=new cv.Mat;cv.Canny(img,imgCanny,options.lower,options.upper);img.delete();return{img:imgCanny,width:imgCanny.cols,height:imgCanny.rows}}registry.register("canny",canny,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{lower:50,upper:150}}export function canny(img,options){let imgCanny=new cv.Mat;cv.Canny(img,imgCanny,options.lower,options.upper);img.delete();return{img:imgCanny,width:imgCanny.cols,height:imgCanny.rows}}registry.register("canny",canny,defaultOptions);

package/operations/convert.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, RequiredOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, RequiredOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         convert: ConvertOptions;
     }

package/operations/convert.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";export function convert(img,options){if(options.rtype===undefined){throw new Error("Invalid options: rtype is required")}let imgConvert=new cv.Mat;img.convertTo(imgConvert,options.rtype);img.delete();return{img:imgConvert,width:imgConvert.cols,height:imgConvert.rows}}registry.register("convert",convert);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";export function convert(img,options){if(options.rtype===undefined){throw new Error("Invalid options: rtype is required")}let imgConvert=new cv.Mat;img.convertTo(imgConvert,options.rtype);img.delete();return{img:imgConvert,width:imgConvert.cols,height:imgConvert.rows}}registry.register("convert",convert);

package/operations/dilate.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         dilate: DilateOptions;
     }

package/operations/dilate.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{size:[5,5],iter:1}}export function dilate(img,options){let imgDilate=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.dilate(img,imgDilate,kernel,new cv.Point(-1,-1),options.iter);img.delete();return{img:imgDilate,width:imgDilate.cols,height:imgDilate.rows}}registry.register("dilate",dilate,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{size:[5,5],iter:1}}export function dilate(img,options){let imgDilate=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.dilate(img,imgDilate,kernel,new cv.Point(-1,-1),options.iter);img.delete();return{img:imgDilate,width:imgDilate.cols,height:imgDilate.rows}}registry.register("dilate",dilate,defaultOptions);

package/operations/erode.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         erode: ErodeOptions;
     }

package/operations/erode.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{size:[5,5],iter:1}}export function erode(img,options){let imgErode=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.erode(img,imgErode,kernel,new cv.Point(-1,-1),options.iter);img.delete();return{img:imgErode,width:imgErode.cols,height:imgErode.rows}}registry.register("erode",erode,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{size:[5,5],iter:1}}export function erode(img,options){let imgErode=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.erode(img,imgErode,kernel,new cv.Point(-1,-1),options.iter);img.delete();return{img:imgErode,width:imgErode.cols,height:imgErode.rows}}registry.register("erode",erode,defaultOptions);

package/operations/grayscale.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         grayscale: GrayscaleOptions;
     }

package/operations/grayscale.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{}}export function grayscale(img,options){let imgGrayscale=new cv.Mat;cv.cvtColor(img,imgGrayscale,cv.COLOR_RGBA2GRAY);img.delete();return{img:imgGrayscale,width:imgGrayscale.cols,height:imgGrayscale.rows}}registry.register("grayscale",grayscale,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{}}export function grayscale(img,options){let imgGrayscale=new cv.Mat;cv.cvtColor(img,imgGrayscale,cv.COLOR_RGBA2GRAY);img.delete();return{img:imgGrayscale,width:imgGrayscale.cols,height:imgGrayscale.rows}}registry.register("grayscale",grayscale,defaultOptions);

package/operations/invert.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         invert: InvertOptions;
     }

package/operations/invert.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{}}export function invert(img,options){let imgInvert=new cv.Mat;cv.bitwise_not(img,imgInvert);img.delete();return{img:imgInvert,width:imgInvert.cols,height:imgInvert.rows}}registry.register("invert",invert,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{}}export function invert(img,options){let imgInvert=new cv.Mat;cv.bitwise_not(img,imgInvert);img.delete();return{img:imgInvert,width:imgInvert.cols,height:imgInvert.rows}}registry.register("invert",invert,defaultOptions);

package/operations/morphological-gradient.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         morphologicalGradient: MorphologicalGradientOptions;
     }

package/operations/morphological-gradient.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{size:[3,3]}}export function morphologicalGradient(img,options){let imgMorphologicalGradient=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.morphologyEx(img,imgMorphologicalGradient,cv.MORPH_GRADIENT,kernel);img.delete();return{img:imgMorphologicalGradient,width:imgMorphologicalGradient.cols,height:imgMorphologicalGradient.rows}}registry.register("morphologicalGradient",morphologicalGradient,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{size:[3,3]}}export function morphologicalGradient(img,options){let imgMorphologicalGradient=new cv.Mat;let kernel=cv.getStructuringElement(cv.MORPH_RECT,new cv.Size(options.size[0],options.size[1]));cv.morphologyEx(img,imgMorphologicalGradient,cv.MORPH_GRADIENT,kernel);img.delete();return{img:imgMorphologicalGradient,width:imgMorphologicalGradient.cols,height:imgMorphologicalGradient.rows}}registry.register("morphologicalGradient",morphologicalGradient,defaultOptions);

package/operations/resize.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, RequiredOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, RequiredOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         resize: ResizeOptions;
     }

package/operations/resize.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";export function resize(img,options){if(!options.width||!options.height){throw new Error("Invalid options: width and height are required")}let imgResize=new cv.Mat;cv.resize(img,imgResize,new cv.Size(options.width,options.height));img.delete();return{img:imgResize,width:imgResize.cols,height:imgResize.rows}}registry.register("resize",resize);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";export function resize(img,options){if(!options.width||!options.height){throw new Error("Invalid options: width and height are required")}let imgResize=new cv.Mat;cv.resize(img,imgResize,new cv.Size(options.width,options.height));img.delete();return{img:imgResize,width:imgResize.cols,height:imgResize.rows}}registry.register("resize",resize);

package/operations/rotate.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, RequiredOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, RequiredOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         rotate: RotateOptions;
     }

package/operations/rotate.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";export function rotate(img,options){let center=options.center||new cv.Point(img.cols/2,img.rows/2);let M=cv.getRotationMatrix2D(center,options.angle,1);let dsize=new cv.Size(img.cols,img.rows);let rotatedImg=new cv.Mat;cv.warpAffine(img,rotatedImg,M,dsize,cv.INTER_LINEAR,cv.BORDER_CONSTANT,new cv.Scalar);img.delete();M.delete();return{img:rotatedImg,width:rotatedImg.cols,height:rotatedImg.rows}}registry.register("rotate",rotate);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";export function rotate(img,options){let center=options.center||new cv.Point(img.cols/2,img.rows/2);let M=cv.getRotationMatrix2D(center,options.angle,1);let dsize=new cv.Size(img.cols,img.rows);let rotatedImg=new cv.Mat;cv.warpAffine(img,rotatedImg,M,dsize,cv.INTER_LINEAR,cv.BORDER_CONSTANT,new cv.Scalar);img.delete();M.delete();return{img:rotatedImg,width:rotatedImg.cols,height:rotatedImg.rows}}registry.register("rotate",rotate);

package/operations/threshold.d.ts

@@ -1,6 +1,6 @@
-import type { OperationResult, PartialOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import type { OperationResult, PartialOptions } from "../pipeline/types.js";
+import { cv } from "../cv-provider.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         threshold: ThresholdOptions;
     }

package/operations/threshold.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";function defaultOptions(){return{lower:0,upper:255,type:cv.THRESH_BINARY_INV+cv.THRESH_OTSU}}export function threshold(img,options){let imgThreshold=new cv.Mat;cv.threshold(img,imgThreshold,options.lower,options.upper,options.type);img.delete();return{img:imgThreshold,width:imgThreshold.cols,height:imgThreshold.rows}}registry.register("threshold",threshold,defaultOptions);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";function defaultOptions(){return{lower:0,upper:255,type:cv.THRESH_BINARY_INV+cv.THRESH_OTSU}}export function threshold(img,options){let imgThreshold=new cv.Mat;cv.threshold(img,imgThreshold,options.lower,options.upper,options.type);img.delete();return{img:imgThreshold,width:imgThreshold.cols,height:imgThreshold.rows}}registry.register("threshold",threshold,defaultOptions);

package/operations/warp.d.ts

@@ -1,6 +1,7 @@
-import type { BoundingBox, OperationResult, Points, RequiredOptions } from "../index.js";
-import { cv } from "../index.js";
-declare module "../index" {
+import { cv } from "../cv-provider.js";
+import type { BoundingBox, Points } from "../index.interface.js";
+import type { OperationResult, RequiredOptions } from "../pipeline/types.js";
+declare module "../pipeline/types" {
     interface RegisteredOperations {
         warp: WarpOptions;
     }

package/operations/warp.js

@@ -1 +1 @@
-import{cv,registry}from"../index.js";export function warp(img,options){if(!options.points||!options.bbox){throw new Error("Invalid options: points and bbox are required")}const{points,bbox}=options;let imgWarp=new cv.Mat;let targetWidth=bbox.x1-bbox.x0;let targetHeight=bbox.y1-bbox.y0;let destArray=[0,0,targetWidth-1,0,targetWidth-1,targetHeight-1,0,targetHeight-1];let srcArray=[points.topLeft.x,points.topLeft.y,points.topRight.x,points.topRight.y,points.bottomRight.x,points.bottomRight.y,points.bottomLeft.x,points.bottomLeft.y];let dest=cv.matFromArray(4,1,cv.CV_32FC2,destArray);let src=cv.matFromArray(4,1,cv.CV_32FC2,srcArray);let M=cv.getPerspectiveTransform(src,dest);let dsize=new cv.Size(targetWidth,targetHeight);cv.warpPerspective(img,imgWarp,M,dsize);M.delete();src.delete();dest.delete();img.delete();return{img:imgWarp,width:imgWarp.cols,height:imgWarp.rows}}registry.register("warp",warp);
+import{cv}from"../cv-provider.js";import{registry}from"../pipeline/registry.js";export function warp(img,options){if(!options.points||!options.bbox){throw new Error("Invalid options: points and bbox are required")}const{points,bbox}=options;let imgWarp=new cv.Mat;let targetWidth=bbox.x1-bbox.x0;let targetHeight=bbox.y1-bbox.y0;let destArray=[0,0,targetWidth-1,0,targetWidth-1,targetHeight-1,0,targetHeight-1];let srcArray=[points.topLeft.x,points.topLeft.y,points.topRight.x,points.topRight.y,points.bottomRight.x,points.bottomRight.y,points.bottomLeft.x,points.bottomLeft.y];let dest=cv.matFromArray(4,1,cv.CV_32FC2,destArray);let src=cv.matFromArray(4,1,cv.CV_32FC2,srcArray);let M=cv.getPerspectiveTransform(src,dest);let dsize=new cv.Size(targetWidth,targetHeight);cv.warpPerspective(img,imgWarp,M,dsize);M.delete();src.delete();dest.delete();img.delete();return{img:imgWarp,width:imgWarp.cols,height:imgWarp.rows}}registry.register("warp",warp);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppu-ocv",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "description": "A type-safe, modular, chainable image processing library built on top of OpenCV.js with a fluent API leveraging pipeline processing.",
   "keywords": [
     "open-cv",
@@ -16,28 +16,38 @@
     "type-safe",
     "modular",
     "chainable",
-    "bun"
+    "bun",
+    "browser",
+    "web"
   ],
   "author": "snowfluke",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./web": {
+      "types": "./index.web.d.ts",
+      "default": "./index.web.js"
+    }
+  },
   "scripts": {
     "task": "bun scripts/task.ts",
     "build:test": "bun task build && bun test",
     "build:publish": "bun task build && bun task report-size && bun task publish",
-    "lint": "eslint ./src",
-    "lint:fix": "eslint ./src --fix"
+    "lint": "prettier --check ./src",
+    "lint:fix": "prettier --write ./src"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "latest",
     "@types/bun": "latest",
     "@types/uglify-js": "latest",
-    "eslint": "latest",
-    "eslint-plugin-jsdoc": "latest",
     "mitata": "latest",
-    "prettier": "^3.6.2",
+    "prettier": "^3.8.1",
     "tsx": "latest",
     "typescript": "latest",
     "typescript-eslint": "latest",

package/pipeline/registry.d.ts

@@ -1,4 +1,4 @@
-import { cv } from "../index.js";
+import { cv } from "../cv-provider.js";
 import type { OperationFunction, OperationName, OperationOptions, OperationResult } from "./index.js";
 export declare class OperationRegistry {
     private operations;

package/pipeline/types.d.ts

@@ -1,4 +1,4 @@
-import cv from "@techstark/opencv-js";
+import { cv } from "../cv-provider.js";
 export interface OperationResult {
     img: cv.Mat;
     width: number;

package/platform/node.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasPlatform } from "../canvas-factory.js";
+/** Node.js canvas platform backed by @napi-rs/canvas */
+export declare const nodePlatform: CanvasPlatform;

package/platform/node.js

@@ -0,0 +1 @@
+import{Canvas,createCanvas as napiCreateCanvas,loadImage as napiLoadImage}from"@napi-rs/canvas";export let nodePlatform={createCanvas(width,height){return napiCreateCanvas(width,height)},async loadImage(source){let img=await napiLoadImage(source);let canvas=napiCreateCanvas(img.width,img.height);let ctx=canvas.getContext("2d");ctx.drawImage(img,0,0);return canvas},isCanvas(value){return value instanceof Canvas}};

package/platform/web.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasPlatform } from "../canvas-factory.js";
+/** Browser canvas platform using native DOM / OffscreenCanvas APIs */
+export declare const webPlatform: CanvasPlatform;

package/platform/web.js

@@ -0,0 +1 @@
+export let webPlatform={createCanvas(width,height){if(typeof OffscreenCanvas!=="undefined"){return new OffscreenCanvas(width,height)}if(typeof document!=="undefined"){let c=document.createElement("canvas");c.width=width;c.height=height;return c}throw new Error("No canvas implementation available in this environment.")},async loadImage(source){let blob;if(source instanceof ArrayBuffer){blob=new Blob([source])}else if(typeof source==="string"){let res=await fetch(source);blob=await res.blob()}else{throw new Error("loadImage: unsupported source type")}let bitmap=await createImageBitmap(blob);let canvas=webPlatform.createCanvas(bitmap.width,bitmap.height);let ctx=canvas.getContext("2d");ctx.drawImage(bitmap,0,0);bitmap.close();return canvas},isCanvas(value){if(typeof HTMLCanvasElement!=="undefined"&&value instanceof HTMLCanvasElement){return true}if(typeof OffscreenCanvas!=="undefined"&&value instanceof OffscreenCanvas){return true}return false}};