@image-marker/web 0.1.0

package/lib/module/core/web/helpers.js

@@ -0,0 +1,251 @@
+const DEFAULT_EDGE_INSET = 20;
+export const DEFAULT_WEB_MAX_SIZE = 2048;
+/** Fit an image inside the same square pixel bound used by native loaders. */
+export function fitSizeWithinMax(size, maxSize = DEFAULT_WEB_MAX_SIZE) {
+    if (!Number.isFinite(maxSize) || !Number.isInteger(maxSize) || maxSize <= 0) {
+        throw new Error('maxSize must be a positive finite integer.');
+    }
+    if (!Number.isFinite(size.width) ||
+        !Number.isFinite(size.height) ||
+        size.width <= 0 ||
+        size.height <= 0) {
+        throw new Error('image dimensions must be finite numbers greater than 0.');
+    }
+    const largestDimension = Math.max(size.width, size.height);
+    if (largestDimension <= maxSize) {
+        return { ...size };
+    }
+    const ratio = maxSize / largestDimension;
+    return {
+        width: Math.max(Math.min(Math.round(size.width * ratio), maxSize), 1),
+        height: Math.max(Math.min(Math.round(size.height * ratio), maxSize), 1),
+    };
+}
+/** Resolve a pixel or percentage value against one canvas axis. */
+export function resolveSpreadValue(value, relativeTo) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : 0;
+    }
+    const normalized = value.trim();
+    const parsed = Number.parseFloat(normalized.endsWith('%') ? normalized.slice(0, -1) : normalized);
+    if (!Number.isFinite(parsed)) {
+        return 0;
+    }
+    return normalized.endsWith('%') ? (relativeTo * parsed) / 100 : parsed;
+}
+/**
+ * Resolve the top-left point of an item using the same directional semantics
+ * as the native renderers. Named anchors default to a 20px inset; explicit
+ * X/Y values replace the inset on their respective axes.
+ */
+export function resolveAnchoredPosition(options, canvas, item, unanchoredDefaultInset = DEFAULT_EDGE_INSET) {
+    const explicitX = resolveSpreadValue(options?.X, canvas.width);
+    const explicitY = resolveSpreadValue(options?.Y, canvas.height);
+    const configuredInsetX = resolveSpreadValue(options?.edgeInset, canvas.width);
+    const configuredInsetY = resolveSpreadValue(options?.edgeInset, canvas.height);
+    const anchor = options?.position;
+    if (!anchor) {
+        return {
+            x: explicitX ?? Math.max(configuredInsetX ?? unanchoredDefaultInset, 0),
+            y: explicitY ?? Math.max(configuredInsetY ?? unanchoredDefaultInset, 0),
+        };
+    }
+    const insetX = Math.max(configuredInsetX ?? DEFAULT_EDGE_INSET, 0);
+    const insetY = Math.max(configuredInsetY ?? DEFAULT_EDGE_INSET, 0);
+    const centeredX = (canvas.width - item.width) / 2;
+    const centeredY = (canvas.height - item.height) / 2;
+    let x = centeredX;
+    let y = centeredY;
+    switch (anchor) {
+        case 'topLeft':
+        case 'bottomLeft':
+            x = insetX;
+            break;
+        case 'topRight':
+        case 'bottomRight':
+            x = canvas.width - item.width - insetX;
+            break;
+        case 'topCenter':
+        case 'bottomCenter':
+        case 'center':
+            x = centeredX;
+            break;
+        default:
+            return {
+                x: explicitX ?? Math.max(configuredInsetX ?? unanchoredDefaultInset, 0),
+                y: explicitY ?? Math.max(configuredInsetY ?? unanchoredDefaultInset, 0),
+            };
+    }
+    switch (anchor) {
+        case 'topLeft':
+        case 'topCenter':
+        case 'topRight':
+            y = insetY;
+            break;
+        case 'bottomLeft':
+        case 'bottomCenter':
+        case 'bottomRight':
+            y = canvas.height - item.height - insetY;
+            break;
+        case 'center':
+            y = centeredY;
+            break;
+    }
+    if (explicitX !== undefined) {
+        if (anchor === 'topRight' || anchor === 'bottomRight') {
+            x = canvas.width - item.width - explicitX;
+        }
+        else if (anchor === 'topCenter' ||
+            anchor === 'bottomCenter' ||
+            anchor === 'center') {
+            x = centeredX + explicitX;
+        }
+        else {
+            x = explicitX;
+        }
+    }
+    if (explicitY !== undefined) {
+        if (anchor === 'bottomLeft' ||
+            anchor === 'bottomCenter' ||
+            anchor === 'bottomRight') {
+            y = canvas.height - item.height - explicitY;
+        }
+        else if (anchor === 'center') {
+            y = centeredY + explicitY;
+        }
+        else {
+            y = explicitY;
+        }
+    }
+    return { x, y };
+}
+export function degreesToRadians(degrees) {
+    if (!Number.isFinite(degrees)) {
+        return 0;
+    }
+    return ((degrees % 360) * Math.PI) / 180;
+}
+/** Bounds of a rectangle rotated around its top-left origin. */
+export function getRotatedBounds(size, degrees) {
+    const radians = degreesToRadians(degrees);
+    if (radians === 0) {
+        return { left: 0, top: 0, ...size };
+    }
+    const cosine = Math.cos(radians);
+    const sine = Math.sin(radians);
+    const points = [
+        { x: 0, y: 0 },
+        { x: size.width * cosine, y: size.width * sine },
+        { x: -size.height * sine, y: size.height * cosine },
+        {
+            x: size.width * cosine - size.height * sine,
+            y: size.width * sine + size.height * cosine,
+        },
+    ];
+    const xs = points.map((point) => point.x);
+    const ys = points.map((point) => point.y);
+    const left = Math.min(...xs);
+    const right = Math.max(...xs);
+    const top = Math.min(...ys);
+    const bottom = Math.max(...ys);
+    return {
+        left,
+        top,
+        width: right - left,
+        height: bottom - top,
+    };
+}
+export function getExpandedCanvasSize(size, degrees) {
+    const bounds = getRotatedBounds(size, degrees);
+    return {
+        width: Math.max(Math.ceil(bounds.width - 1e-7), 1),
+        height: Math.max(Math.ceil(bounds.height - 1e-7), 1),
+    };
+}
+export function normalizeQuality(quality) {
+    const resolved = quality ?? 100;
+    if (!Number.isFinite(resolved) ||
+        !Number.isInteger(resolved) ||
+        resolved < 0 ||
+        resolved > 100) {
+        throw new Error('quality must be a finite integer between 0 and 100.');
+    }
+    return resolved;
+}
+export function normalizeOutputFormat(format) {
+    const resolved = format ?? 'jpg';
+    if (resolved !== 'png' &&
+        resolved !== 'jpg' &&
+        resolved !== 'webp' &&
+        resolved !== 'base64') {
+        throw new Error(`Unsupported web image format: ${resolved}.`);
+    }
+    return resolved;
+}
+/** Serialize a rendered canvas and turn browser security failures into a useful CORS error. */
+export function encodeCanvas(canvas, format, quality) {
+    const normalizedFormat = normalizeOutputFormat(format);
+    const normalizedQuality = normalizeQuality(quality);
+    const mimeType = normalizedFormat === 'jpg'
+        ? 'image/jpeg'
+        : normalizedFormat === 'webp'
+            ? 'image/webp'
+            : 'image/png';
+    try {
+        const dataUrl = canvas.toDataURL(mimeType, normalizedQuality / 100);
+        if (!dataUrl.startsWith(`data:${mimeType}`)) {
+            throw new Error('The browser could not encode the rendered canvas.');
+        }
+        return dataUrl;
+    }
+    catch (error) {
+        const errorName = error && typeof error === 'object' && 'name' in error
+            ? String(error.name)
+            : '';
+        if (errorName === 'SecurityError') {
+            throw new Error('Unable to export the canvas because an image tainted it. Configure CORS on remote images (Access-Control-Allow-Origin) or use a local file/data URL.');
+        }
+        throw error;
+    }
+}
+/** Encode a rendered canvas without expanding its bytes into a data URL. */
+export function encodeCanvasToBlob(canvas, format, quality) {
+    const normalizedFormat = normalizeOutputFormat(format);
+    const normalizedQuality = normalizeQuality(quality);
+    const mimeType = normalizedFormat === 'jpg'
+        ? 'image/jpeg'
+        : normalizedFormat === 'webp'
+            ? 'image/webp'
+            : 'image/png';
+    if (typeof canvas.toBlob !== 'function') {
+        return Promise.reject(new Error('This browser does not support Canvas toBlob() encoding.'));
+    }
+    return new Promise((resolve, reject) => {
+        try {
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error('The browser could not encode the rendered canvas.'));
+                    return;
+                }
+                if (blob.type !== mimeType) {
+                    reject(new Error(`The browser encoded an unexpected MIME type: ${blob.type || 'empty'}.`));
+                    return;
+                }
+                resolve(blob);
+            }, mimeType, normalizedQuality / 100);
+        }
+        catch (error) {
+            const errorName = error && typeof error === 'object' && 'name' in error
+                ? String(error.name)
+                : '';
+            if (errorName === 'SecurityError') {
+                reject(new Error('Unable to export the canvas because an image tainted it. Configure CORS on remote images (Access-Control-Allow-Origin) or use a local file/data URL.'));
+                return;
+            }
+            reject(error);
+        }
+    });
+}

package/lib/module/core/web/index.d.ts

@@ -0,0 +1,59 @@
+import type { ImageMarkOptions, ImageOptions, MarkOptions, TextMarkOptions } from '../index.js';
+import type { WatermarkBlobRecipeResultOptions, WatermarkRecipe, WatermarkRecipeDocument, WatermarkRecipeOptions, WatermarkRecipeResultOptions } from '../recipe.js';
+import type { DetectInvisibleWatermarkOptions, EmbedInvisibleWatermarkOptions, InvisibleWatermarkDetectionResult } from '../invisible-watermark.js';
+import type { MarkerImageInfo } from '../image-info.js';
+import type { MarkerJobOptions } from '../job.js';
+import type { MarkerResult } from '../result.js';
+import type { WatermarkBatchOptions, WatermarkBatchResult } from '../batch.js';
+import type { ContentCredentialsVerificationResult, EmbedInvisibleWithCredentialsOptions, EmbedInvisibleWithCredentialsResult, VerifyContentCredentialsOptions } from '../content-credentials.js';
+import type { WebMarkerInstance, WebMarkerRuntimeOptions } from './runtime.js';
+export type { WebMarkerCapabilities, WebMarkerCancellationMode, WebMarkerExecutionAdapter, WebMarkerExecutionOperation, WebMarkerExecutionRequest, WebMarkerExecutionResultKind, WebMarkerExecutionTask, WebMarkerExecutionTermination, WebMarkerInstance, WebMarkerRuntimeOptions, } from './runtime.js';
+export type { WebResourceAdapter } from './browser.js';
+/**
+ * Public image-marking API shared by native and Web targets.
+ *
+ * Metro selects the native TurboModule implementation on iOS and Android.
+ * React Native Web and standard browser bundlers select this SSR-safe Canvas
+ * 2D implementation, which only touches DOM globals when a method is called.
+ */
+declare class Marker {
+    /** Read display dimensions, encoded dimensions, format, and orientation. */
+    static getImageInfo(source: ImageOptions['src']): Promise<MarkerImageInfo>;
+    /** Embed a locator first, then ask the supplied adapter to sign the result. */
+    static embedInvisibleWithCredentials(options: EmbedInvisibleWithCredentialsOptions, control?: MarkerJobOptions): Promise<EmbedInvisibleWithCredentialsResult>;
+    /** Verify Content Credentials through an application-supplied adapter. */
+    static verifyContentCredentials(options: VerifyContentCredentialsOptions): Promise<ContentCredentialsVerificationResult>;
+    /** Embed authenticated locators into many images while preserving input order. */
+    static embedInvisibleMany(inputs: readonly EmbedInvisibleWatermarkOptions[], options?: WatermarkBatchOptions<MarkerResult>): Promise<Array<WatermarkBatchResult<MarkerResult>>>;
+    /** Detect authenticated locators in many images while preserving input order. */
+    static detectInvisibleMany(inputs: readonly DetectInvisibleWatermarkOptions[], options?: WatermarkBatchOptions<InvisibleWatermarkDetectionResult>): Promise<Array<WatermarkBatchResult<InvisibleWatermarkDetectionResult>>>;
+    /**
+     * Embed a short, authenticated locator into the final image pixels.
+     *
+     * This Beta API supports distribution tracing. It is not DRM, encryption,
+     * or proof that the image was never edited.
+     */
+    static embedInvisible(options: EmbedInvisibleWatermarkOptions, control?: MarkerJobOptions): Promise<MarkerResult>;
+    /** Detect and authenticate an invisible locator in an image without writing a file. */
+    static detectInvisible(options: DetectInvisibleWatermarkOptions, control?: MarkerJobOptions): Promise<InvisibleWatermarkDetectionResult>;
+    /** Save ordered layers and output settings for reuse across one or many images. */
+    static createRecipe<ResultOptions extends WatermarkRecipeResultOptions | undefined = undefined>(options: WatermarkRecipeOptions, resultOptions?: ResultOptions): WatermarkRecipe<ResultOptions extends WatermarkBlobRecipeResultOptions ? Blob : MarkerResult>;
+    /** Import a persisted Recipe v1/v2 document, migrating v1 to v2 first. */
+    static importRecipe<ResultOptions extends WatermarkRecipeResultOptions | undefined = undefined>(document: WatermarkRecipeDocument, resultOptions?: ResultOptions): WatermarkRecipe<ResultOptions extends WatermarkBlobRecipeResultOptions ? Blob : MarkerResult>;
+    /** Render one or more text watermark layers. */
+    static markText(options: TextMarkOptions, control?: MarkerJobOptions): Promise<MarkerResult>;
+    /** Render one or more image watermark layers. */
+    static markImage(options: ImageMarkOptions, control?: MarkerJobOptions): Promise<MarkerResult>;
+    /** Render ordered mixed text and image watermark layers. */
+    static mark(options: MarkOptions, control?: MarkerJobOptions): Promise<MarkerResult>;
+}
+/**
+ * Create an isolated Web Marker instance. The legacy static `Marker` API
+ * remains the default DOM path; use this factory when task cancellation and
+ * resource ownership need to be scoped to a desktop application instance.
+ */
+export declare function createWebMarker(options?: WebMarkerRuntimeOptions): WebMarkerInstance;
+export { Marker, Marker as WebMarker };
+export { degreesToRadians, encodeCanvas, encodeCanvasToBlob, fitSizeWithinMax, getExpandedCanvasSize, getRotatedBounds, normalizeOutputFormat, normalizeQuality, resolveAnchoredPosition, resolveSpreadValue, } from './helpers.js';
+export type { CanvasEncoder, Point, RotatedBounds, Size, WebOutputFormat, } from './helpers.js';
+export default Marker;