ポストプロセスの叩き作成完了

index.js

@@ -1,5 +1,4 @@
 import { applyEffect, getAvailableEffects } from './effects.js';
-import { DummyPostProcess } from './postprocess/dummy.js';
 import { InvertPostProcess } from './postprocess/invert.js';
 import { BasePostProcess } from './postprocess/base.js';
 
@@ -228,7 +227,6 @@ function debounceRender(callback, delay = 200) {
 
 // ポストプロセス処理のインスタンスを作成
 const postProcessors = {
-    dummy: new DummyPostProcess(),
     invert: new InvertPostProcess()
 };
 

postprocess/base.js

@@ -0,0 +1,28 @@
+/**
+ * ポストプロセス処理の基底クラス
+ */
+export class BasePostProcess {
+    constructor() {
+        this.name = 'base';
+        this.label = 'ベース';
+    }
+
+    /**
+     * ポストプロセス処理を適用
+     * @param {HTMLCanvasElement} canvas - 処理対象のcanvas
+     * @returns {HTMLCanvasElement} - 処理後のcanvas
+     */
+    async apply(canvas) {
+        // 基底クラスでは何もせずにcanvasをそのまま返す
+        return canvas;
+    }
+
+    /**
+     * 最終的なPNG画像データを生成
+     * @param {HTMLCanvasElement} canvas - 処理対象のcanvas
+     * @returns {string} - PNG形式の画像データURL
+     */
+    static toPng(canvas) {
+        return canvas.toDataURL('image/png');
+    }
+} 

postprocess/invert.js

@@ -0,0 +1,51 @@
+import { BasePostProcess } from './base.js';
+
+/**
+ * 色を反転させるポストプロセス
+ */
+export class InvertPostProcess extends BasePostProcess {
+    constructor() {
+        super();
+        this.name = 'invert';
+        this.label = '色反転';
+        this.ui = {
+            template: `
+                <p class="text-muted mb-0"><small>設定はありません</small></p>
+            `
+        };
+    }
+
+    /**
+     * 色を反転させる処理を適用
+     * @param {HTMLCanvasElement} canvas - 処理対象のcanvas
+     * @returns {HTMLCanvasElement} - 処理後のcanvas
+     */
+    async apply(canvas) {
+        // 新しいcanvasを作成
+        const newCanvas = document.createElement('canvas');
+        newCanvas.width = canvas.width;
+        newCanvas.height = canvas.height;
+        const ctx = newCanvas.getContext('2d');
+
+        // 元のcanvasを描画
+        ctx.drawImage(canvas, 0, 0);
+
+        // ピクセルデータを取得
+        const imageData = ctx.getImageData(0, 0, newCanvas.width, newCanvas.height);
+        const data = imageData.data;
+
+        // 各ピクセルの色を反転
+        for (let i = 0; i < data.length; i += 4) {
+            // RGB値を反転（アルファ値は変更しない）
+            data[i] = 255 - data[i];         // R
+            data[i + 1] = 255 - data[i + 1]; // G
+            data[i + 2] = 255 - data[i + 2]; // B
+            // data[i + 3] はアルファ値なので変更しない
+        }
+
+        // 反転した画像データを描画
+        ctx.putImageData(imageData, 0, 0);
+
+        return newCanvas;
+    }
+}