特定の形式でピクセル データを取得する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ここでは、BitmapDecoder オブジェクトを使って画像からピクセル データを取得する方法を示します。 ピクセルはバイト配列としてパッケージ化され、データを要求するときに形式を指定できます。
BitmapDecoder が生成するピクセル データの以下の属性を自由に組み合わせて指定できます。
- ピクセル形式 (BitmapPixelFormat)
- アルファ モード (BitmapAlphaMode)
- 反転、回転、拡大縮小、トリミングの操作 (BitmapTransform)
- 埋め込みの EXIF 方向フラグを使うかどうか (ExifOrientationMode)
- sRGB 色空間に対して色の管理を実行するかどうか (ColorManagementMode)
これは、デコード動作を微調整する必要がある場合や、アプリで特定の形式のピクセル データが要求される場合に便利です。たとえば、HTML Canvas Context2D API と相互運用している場合は、Rgba8 とストレート アルファであるピクセル データを用意する必要があります。
理解しておく必要があること
テクノロジ
必要条件
- JavaScript を使った基本的な Windows ランタイム アプリを作成できることを前提としています。詳しくは、「JavaScript を使った初めての Windows ランタイム アプリの作成」をご覧ください。
- BitmapDecoder オブジェクトが必要です。 「画像をデコードする方法」では、この作成方法について説明しています。
手順
ステップ 1: デコーダー オブジェクトを取得する
BitmapDecoder オブジェクトを受け取る関数を最初に作成します。
function GetPixelData(decoder) {
デコーダーを使うとピクセル データにアクセスできます。 まだデコーダー オブジェクトがない場合は、「画像をデコードする方法」をご覧ください。
ステップ 2: ピクセル データ プロバイダー オブジェクトを取得する
getPixelDataAsync メソッドを呼び出し、返されるピクセル データの形式を制御するパラメーターを指定します。 ピクセル データ プロバイダーには、指定した形式のピクセル データが含まれます。 getPixelDataAsync が返されると、ピクセル データが割り当てられ、使うことができるようになります。
decoder.getPixelDataAsync(
Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
Windows.Graphics.Imaging.BitmapAlphaMode.straight,
new Windows.Graphics.Imaging.BitmapTransform(),
Windows.Graphics.Imaging.ExifOrientationMode.respectExifOrientation,
Windows.Graphics.Imaging.ColorManagementMode.colorManageToSRgb
).then(function (pixelDataProvider) {
この場合、ピクセル形式は RGBA8 に設定し、アルファ モードはストレートに設定しています。 ピクセル データが返されると、処理コードはこの前提に基づいて動作します。EXIF 方向を基準とする変換以外の変換は適用しません。また、色の管理は有効になっています。
注 getPixelDataAsync は、引数なしで呼び出すことができます。その場合は、元の形式でピクセル データが返されます。 詳しくは、「既定の形式でピクセル データを取得する方法」をご覧ください。
ステップ 3: データ プロバイダーからピクセルを取得する
detachPixelData メソッドを呼び出して、ピクセル データのバイト配列を取得します。
var pixels = pixelDataProvider.detachPixelData()
detachPixelData 関数はピクセル データのバイト配列を同期的に返します。 この例では、Rgba8 ピクセル形式のピクセル データを要求するため、配列の各要素は 1 つのカラー チャネル値に対応します。
注 detachPixelData は、1 回だけ呼び出すことができます。その後の呼び出しはすべて失敗します。再びピクセルを取得する場合は、getPixelDataAsync を呼び出して、新しいピクセル データ プロバイダーを取得する必要があります。
ステップ 4: ピクセルをループ処理する
取得したピクセル データを処理します。このコードでは、緑色チャネルと青色チャネルを 0 に設定し、赤色チャネルとアルファ チャネルは変更しません。
var height = decoder.orientedPixelHeight;
var width = decoder.orientedPixelWidth;
for (var i = 0; i < height; i++) {
for (var j = 0; j < width; j++) {
pixels[(i * height + j) * 4 + 1] = 0; // Green channel (RGBA)
pixels[(i * height + j) * 4 + 2] = 0; // Blue channel (RGBA)
}
}
});
}
注 手順 2. では、getPixelDataAsync の呼び出しでデコーダーが EXIF 方向が適用されたピクセル データを返すように指定しました。そのため、画像の大きさを取得するときは、pixelWidth と pixelHeight ではなく、orientedPixelWidth と orientedPixelHeight プロパティを使うことが重要です。orientedPixelWidth と orientedPixelHeight プロパティは、EXIF 方向による大きさの変更を反映します。