LogoMaker / postprocess /invert.js
SenY's picture
ポストプロセスの叩き作成完了
1e8da4e
raw
history blame
1.66 kB
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;
}
}