HTMLでPNG画像の不透明領域を検出する方法

PNG画像の不透明領域を検出する基本手順

HTML(JavaScript)環境で、透過していないPNG画像の領域を検出するには、Canvas APIを使ってピクセルデータを解析します。大まかな流れは以下のとおりです。

• まず画像のピクセルバッファを取得する
• そのバッファへの32ビット参照を取得する
• x=0側から走査して左端(x1)を検出する
• 幅の終端側から走査して右端(x2)を検出する
• y=0側から走査して上端(y1)を検出する
• 高さの終端側から走査して下端(y2)を検出する

1. ピクセルバッファを取得する

対象の画像を一旦canvasに描画し、getImageData()メソッドを呼び出してImageDataオブジェクトを取得します。これにより各ピクセルのRGBA値にアクセスできるようになります。

const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, img.width, img.height);

2. バッファへの32ビット参照を取得する

ImageDataのdataプロパティはRGBA各8ビットずつ並んだUint8ClampedArrayです。ここからUint32Arrayビューを作成すると、1ピクセルを32ビット整数として扱え、走査処理を高速化できます。

const buf = new Uint32Array(imageData.data.buffer);

3. 四辺を走査してエッジを検出する

• x1(左端): x=0から右方向へ走査し、最初に不透明ピクセルが見つかった列を記録します。
• x2(右端): 幅-1から左方向へ走査し、最初に不透明ピクセルが見つかった列を記録します。
• y1(上端): y=0から下方向へ走査し、最初に不透明ピクセルが見つかった行を記録します。
• y2(下端): 高さ-1から上方向へ走査し、最初に不透明ピクセルが見つかった行を記録します。

アルファ値が0より大きい(必要に応じて任意の閾値以上の)ピクセルを「不透明」とみなすことで、画像内の実質的なコンテンツ範囲、すなわちバウンディングボックス(x1, y1, x2, y2)を求めることができます。

この手法の活用例

この方法は、画像の余白(透明部分)を自動的にトリミングしたい場合や、スプライトアニメーションの当たり判定領域を計算したい場合、アイコンの実サイズを測定したい場合などに役立ちます。全ピクセルを走査するため処理コストはありますが、32ビット単位でのアクセスと行・列ごとの早期リターンを組み合わせることで、実用的な速度で動作させられます。