postprocess/invert.js

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;
    }
}