image-color-grading 1.0.2 → 1.0.4

package/dist/index.d.cts

@@ -1,3 +1,16 @@
+/**
+ * 后端类型
+ */
+type BackendType$1 = 'webgl' | 'webgpu';
+/**
+ * 处理器配置选项
+ */
+interface ProcessorOptions {
+    /** canvas 元素 */
+    canvas?: HTMLCanvasElement;
+    /** 后端选择：'auto' | 'webgpu' | 'webgl' */
+    backend?: 'auto' | BackendType$1;
+}
 /**
  * 调色设置参数
  */
@@ -112,9 +125,16 @@ declare function analyzeImage(imageData: ImageData): ImageAnalysis;
 /**
  * 图像调色处理器
  *
+ * 支持 WebGL 和 WebGPU 双后端，自动降级
+ *
  * @example
  * ```ts
+ * // 默认自动选择后端
  * const processor = new ImageColorGrading();
+ *
+ * // 指定使用 WebGPU
+ * const processor = new ImageColorGrading({ backend: 'webgpu' });
+ *
  * await processor.loadImage('path/to/image.jpg');
  * processor.setSettings({ brightness: 20, contrast: 10 });
  * processor.render();
@@ -123,18 +143,32 @@ declare function analyzeImage(imageData: ImageData): ImageAnalysis;
  */
 declare class ImageColorGrading {
     private canvas;
-    private resources;
+    private backend;
+    private backendType;
     private settings;
     private imageLoaded;
+    private initPromise;
     /**
      * 创建图像调色处理器
-     * @param canvas - 可选的 canvas 元素，不传则自动创建
+     * @param options - 配置选项
      */
-    constructor(canvas?: HTMLCanvasElement);
+    constructor(options?: ProcessorOptions);
     /**
      * 获取 canvas 元素
      */
     getCanvas(): HTMLCanvasElement;
+    /**
+     * 获取当前后端类型
+     */
+    getBackendType(): BackendType$1;
+    /**
+     * 检查 WebGPU 是否可用
+     */
+    static isWebGPUSupported(): boolean;
+    /**
+     * 检查 WebGL 是否可用
+     */
+    static isWebGLSupported(): boolean;
     /**
      * 获取当前设置
      */
@@ -148,6 +182,14 @@ declare class ImageColorGrading {
      * 重置所有设置为默认值
      */
     resetSettings(): void;
+    /**
+     * 初始化后端
+     */
+    private initBackend;
+    /**
+     * 确保后端已初始化
+     */
+    private ensureBackend;
     /**
      * 从 URL 加载图像
      * @param url - 图像 URL
@@ -158,7 +200,7 @@ declare class ImageColorGrading {
      * 从 HTMLImageElement 加载图像
      * @param image - 图像元素
      */
-    loadFromImage(image: HTMLImageElement): void;
+    loadFromImage(image: HTMLImageElement): Promise<void>;
     /**
      * 从 File 对象加载图像
      * @param file - File 对象
@@ -169,7 +211,7 @@ declare class ImageColorGrading {
      * 从 ImageData 加载图像
      * @param imageData - ImageData 对象
      */
-    loadFromImageData(imageData: ImageData): void;
+    loadFromImageData(imageData: ImageData): Promise<void>;
     /**
      * 渲染图像
      */
@@ -223,11 +265,140 @@ declare class ImageColorGrading {
      * @returns 应用的设置
      */
     applyPreset(preset: PresetType): ColorGradingSettings;
-    private getWebGLContext;
-    private initFromImage;
+}
+
+/**
+ * 后端抽象接口
+ * 定义 WebGL 和 WebGPU 后端的统一接口
+ */
+
+/**
+ * 后端类型
+ */
+type BackendType = 'webgl' | 'webgpu';
+/**
+ * 后端初始化选项
+ */
+interface BackendOptions {
+}
+/**
+ * 后端抽象基类
+ */
+declare abstract class BaseBackend {
+    protected canvas: HTMLCanvasElement;
+    protected width: number;
+    protected height: number;
+    protected initialized: boolean;
+    protected options: BackendOptions;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    /**
+     * 获取后端类型
+     */
+    abstract getType(): BackendType;
+    /**
+     * 检查后端是否可用
+     */
+    static isSupported(): boolean;
+    /**
+     * 初始化后端
+     */
+    abstract init(): Promise<void> | void;
+    /**
+     * 从图像元素加载纹理
+     */
+    abstract loadFromImage(image: HTMLImageElement): void;
+    /**
+     * 从 ImageData 加载纹理
+     */
+    abstract loadFromImageData(imageData: ImageData): void;
+    /**
+     * 渲染图像
+     */
+    abstract render(settings: ColorGradingSettings): void;
+    /**
+     * 获取渲染结果的 ImageData
+     */
+    abstract getImageData(): ImageData;
+    /**
+     * 获取图像尺寸
+     */
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * 检查是否已初始化
+     */
+    isInitialized(): boolean;
+    /**
+     * 销毁后端资源
+     */
+    abstract dispose(): void;
+}
+/**
+ * 检测 WebGPU 支持
+ */
+declare function isWebGPUSupported(): boolean;
+/**
+ * 检测 WebGL 支持
+ */
+declare function isWebGLSupported(): boolean;
+/**
+ * 自动选择最佳后端
+ */
+declare function selectBestBackend(preferred?: 'auto' | BackendType): BackendType;
+
+/**
+ * WebGL 后端实现
+ */
+
+declare class WebGLBackend extends BaseBackend {
+    private gl;
+    private resources;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    getType(): BackendType;
+    static isSupported(): boolean;
+    init(): void;
+    loadFromImage(image: HTMLImageElement): void;
+    loadFromImageData(imageData: ImageData): void;
+    render(settings: ColorGradingSettings): void;
+    getImageData(): ImageData;
+    dispose(): void;
+    private getShaderSource;
+    private initResources;
+    private disposeResources;
+    private drawFrame;
+}
+
+/**
+ * WebGPU 后端实现
+ */
+
+declare class WebGPUBackend extends BaseBackend {
+    private device;
+    private resources;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    getType(): BackendType;
+    static isSupported(): boolean;
+    init(): Promise<void>;
+    loadFromImage(image: HTMLImageElement): void;
+    loadFromImageData(imageData: ImageData): void;
+    render(settings: ColorGradingSettings): void;
+    getImageData(): ImageData;
+    /**
+     * 异步获取 ImageData
+     */
+    getImageDataAsync(): Promise<ImageData>;
+    dispose(): void;
+    private getShaderSource;
+    private createPipeline;
+    private createRenderTarget;
     private initResources;
+    private initResourcesFromImageData;
+    private setupResources;
     private disposeResources;
+    private createUniformBuffer;
     private drawFrame;
 }
 
-export { type ColorGradingSettings, type ExportOptions, type ImageAnalysis, ImageColorGrading, type ImageLevels, type PartialColorGradingSettings, type PresetType, analyzeImage, analyzeImageLevels, analyzeImageVibrance, defaultSettings, presets };
+export { type BackendType$1 as BackendType, BaseBackend, type ColorGradingSettings, type ExportOptions, type ImageAnalysis, ImageColorGrading, type ImageLevels, type PartialColorGradingSettings, type PresetType, type ProcessorOptions, WebGLBackend, WebGPUBackend, analyzeImage, analyzeImageLevels, analyzeImageVibrance, defaultSettings, isWebGLSupported, isWebGPUSupported, presets, selectBestBackend };

package/dist/index.d.ts

@@ -1,3 +1,16 @@
+/**
+ * 后端类型
+ */
+type BackendType$1 = 'webgl' | 'webgpu';
+/**
+ * 处理器配置选项
+ */
+interface ProcessorOptions {
+    /** canvas 元素 */
+    canvas?: HTMLCanvasElement;
+    /** 后端选择：'auto' | 'webgpu' | 'webgl' */
+    backend?: 'auto' | BackendType$1;
+}
 /**
  * 调色设置参数
  */
@@ -112,9 +125,16 @@ declare function analyzeImage(imageData: ImageData): ImageAnalysis;
 /**
  * 图像调色处理器
  *
+ * 支持 WebGL 和 WebGPU 双后端，自动降级
+ *
  * @example
  * ```ts
+ * // 默认自动选择后端
  * const processor = new ImageColorGrading();
+ *
+ * // 指定使用 WebGPU
+ * const processor = new ImageColorGrading({ backend: 'webgpu' });
+ *
  * await processor.loadImage('path/to/image.jpg');
  * processor.setSettings({ brightness: 20, contrast: 10 });
  * processor.render();
@@ -123,18 +143,32 @@ declare function analyzeImage(imageData: ImageData): ImageAnalysis;
  */
 declare class ImageColorGrading {
     private canvas;
-    private resources;
+    private backend;
+    private backendType;
     private settings;
     private imageLoaded;
+    private initPromise;
     /**
      * 创建图像调色处理器
-     * @param canvas - 可选的 canvas 元素，不传则自动创建
+     * @param options - 配置选项
      */
-    constructor(canvas?: HTMLCanvasElement);
+    constructor(options?: ProcessorOptions);
     /**
      * 获取 canvas 元素
      */
     getCanvas(): HTMLCanvasElement;
+    /**
+     * 获取当前后端类型
+     */
+    getBackendType(): BackendType$1;
+    /**
+     * 检查 WebGPU 是否可用
+     */
+    static isWebGPUSupported(): boolean;
+    /**
+     * 检查 WebGL 是否可用
+     */
+    static isWebGLSupported(): boolean;
     /**
      * 获取当前设置
      */
@@ -148,6 +182,14 @@ declare class ImageColorGrading {
      * 重置所有设置为默认值
      */
     resetSettings(): void;
+    /**
+     * 初始化后端
+     */
+    private initBackend;
+    /**
+     * 确保后端已初始化
+     */
+    private ensureBackend;
     /**
      * 从 URL 加载图像
      * @param url - 图像 URL
@@ -158,7 +200,7 @@ declare class ImageColorGrading {
      * 从 HTMLImageElement 加载图像
      * @param image - 图像元素
      */
-    loadFromImage(image: HTMLImageElement): void;
+    loadFromImage(image: HTMLImageElement): Promise<void>;
     /**
      * 从 File 对象加载图像
      * @param file - File 对象
@@ -169,7 +211,7 @@ declare class ImageColorGrading {
      * 从 ImageData 加载图像
      * @param imageData - ImageData 对象
      */
-    loadFromImageData(imageData: ImageData): void;
+    loadFromImageData(imageData: ImageData): Promise<void>;
     /**
      * 渲染图像
      */
@@ -223,11 +265,140 @@ declare class ImageColorGrading {
      * @returns 应用的设置
      */
     applyPreset(preset: PresetType): ColorGradingSettings;
-    private getWebGLContext;
-    private initFromImage;
+}
+
+/**
+ * 后端抽象接口
+ * 定义 WebGL 和 WebGPU 后端的统一接口
+ */
+
+/**
+ * 后端类型
+ */
+type BackendType = 'webgl' | 'webgpu';
+/**
+ * 后端初始化选项
+ */
+interface BackendOptions {
+}
+/**
+ * 后端抽象基类
+ */
+declare abstract class BaseBackend {
+    protected canvas: HTMLCanvasElement;
+    protected width: number;
+    protected height: number;
+    protected initialized: boolean;
+    protected options: BackendOptions;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    /**
+     * 获取后端类型
+     */
+    abstract getType(): BackendType;
+    /**
+     * 检查后端是否可用
+     */
+    static isSupported(): boolean;
+    /**
+     * 初始化后端
+     */
+    abstract init(): Promise<void> | void;
+    /**
+     * 从图像元素加载纹理
+     */
+    abstract loadFromImage(image: HTMLImageElement): void;
+    /**
+     * 从 ImageData 加载纹理
+     */
+    abstract loadFromImageData(imageData: ImageData): void;
+    /**
+     * 渲染图像
+     */
+    abstract render(settings: ColorGradingSettings): void;
+    /**
+     * 获取渲染结果的 ImageData
+     */
+    abstract getImageData(): ImageData;
+    /**
+     * 获取图像尺寸
+     */
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * 检查是否已初始化
+     */
+    isInitialized(): boolean;
+    /**
+     * 销毁后端资源
+     */
+    abstract dispose(): void;
+}
+/**
+ * 检测 WebGPU 支持
+ */
+declare function isWebGPUSupported(): boolean;
+/**
+ * 检测 WebGL 支持
+ */
+declare function isWebGLSupported(): boolean;
+/**
+ * 自动选择最佳后端
+ */
+declare function selectBestBackend(preferred?: 'auto' | BackendType): BackendType;
+
+/**
+ * WebGL 后端实现
+ */
+
+declare class WebGLBackend extends BaseBackend {
+    private gl;
+    private resources;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    getType(): BackendType;
+    static isSupported(): boolean;
+    init(): void;
+    loadFromImage(image: HTMLImageElement): void;
+    loadFromImageData(imageData: ImageData): void;
+    render(settings: ColorGradingSettings): void;
+    getImageData(): ImageData;
+    dispose(): void;
+    private getShaderSource;
+    private initResources;
+    private disposeResources;
+    private drawFrame;
+}
+
+/**
+ * WebGPU 后端实现
+ */
+
+declare class WebGPUBackend extends BaseBackend {
+    private device;
+    private resources;
+    constructor(canvas: HTMLCanvasElement, options?: BackendOptions);
+    getType(): BackendType;
+    static isSupported(): boolean;
+    init(): Promise<void>;
+    loadFromImage(image: HTMLImageElement): void;
+    loadFromImageData(imageData: ImageData): void;
+    render(settings: ColorGradingSettings): void;
+    getImageData(): ImageData;
+    /**
+     * 异步获取 ImageData
+     */
+    getImageDataAsync(): Promise<ImageData>;
+    dispose(): void;
+    private getShaderSource;
+    private createPipeline;
+    private createRenderTarget;
     private initResources;
+    private initResourcesFromImageData;
+    private setupResources;
     private disposeResources;
+    private createUniformBuffer;
     private drawFrame;
 }
 
-export { type ColorGradingSettings, type ExportOptions, type ImageAnalysis, ImageColorGrading, type ImageLevels, type PartialColorGradingSettings, type PresetType, analyzeImage, analyzeImageLevels, analyzeImageVibrance, defaultSettings, presets };
+export { type BackendType$1 as BackendType, BaseBackend, type ColorGradingSettings, type ExportOptions, type ImageAnalysis, ImageColorGrading, type ImageLevels, type PartialColorGradingSettings, type PresetType, type ProcessorOptions, WebGLBackend, WebGPUBackend, analyzeImage, analyzeImageLevels, analyzeImageVibrance, defaultSettings, isWebGLSupported, isWebGPUSupported, presets, selectBestBackend };