既定の形式でピクセル データを取得する方法 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ここでは、BitmapDecoder オブジェクトを使って画像からピクセル データを取得する方法を示します。 ピクセルはバイト配列としてパッケージ化され、最適な形式が BitmapDecoder によって自動的に選択されます。
BitmapDecoder は、画像の最適なピクセル形式を自動的に判断し、その形式でピクセル データを出力することができます。チャネルあたり 8 ビット超の精度をサポートする JPEG-XR などの形式で保存された画像を読み込む場合に活かすことができます。BitmapDecoder で最適なピクセル形式が決まる場合は、ピクセル形式とアルファ モードの考えられるすべての組み合わせを検出して処理する必要があります。組み合わせは、実行時に、画像をデコードするときに決まります。
注
特定の形式でピクセル データを取得する場合は、「特定の形式でピクセル データを取得する方法」をご覧ください。
理解しておく必要があること
テクノロジ
必要条件
- JavaScript を使った基本的な Windows ランタイム アプリを作成できることを前提としています。詳しくは、「JavaScript を使った初めての Windows ランタイム アプリの作成」をご覧ください。
- BitmapDecoder オブジェクトが必要です。 「画像をデコードする方法」では、この作成方法について説明しています。
手順
ステップ 1: デコーダー オブジェクトを取得する
BitmapDecoder オブジェクトを受け取る関数を最初に作成し、取得したプロパティを格納する変数を宣言します。
function DecodeDefaultPixels(decoder) {
デコーダーを使うとピクセル データにアクセスできます。 まだデコーダー オブジェクトがない場合は、「画像をデコードする方法」をご覧ください。
ステップ 2: ピクセル データ プロバイダー オブジェクトを取得する
パラメーターを指定せずに getPixelDataAsync メソッドを呼び出します。getPixelDataAsync が返されると、ピクセル データが割り当てられ、使うことができるようになります。
decoder.getPixelDataAsync().then(function (pixelDataProvider) {
この場合、ピクセル形式とアルファ モードは自動的に決まります。EXIF 方向が適用され、ピクセル データは sRGB に従って色が管理されます。詳しくは、「getPixelDataAsync」をご覧ください。
ステップ 3: 個々のピクセル形式とアルファ モードの組み合わせを処理する
返されるピクセル データのピクセル形式とアルファ モードは実行時に決まるため、考えられるそれぞれの組み合わせをアプリで独自のコード パスを使って検出し、処理する必要があります。返されるピクセル データのピクセル形式とアルファ モードを決めるには、BitmapDecoder で bitmapPixelFormat と bitmapAlphaMode プロパティを照会します。
この例では、各ピクセルのカラー チャネルの値について説明します。そのため、さまざまなピクセル ビット深度とチャネル順序を処理する必要があります。
var rawPixels = pixelDataProvider.detachPixelData();
var pixels, bOffset, gOffset; // Assign these in the below switch block.
switch (decoder.bitmapPixelFormat) {
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba16:
// Allocate a typed array with the raw pixel data
var pixelBufferView_U8 = new Uint8Array(rawPixels);
// Uint16Array provides a typed view into the raw 8 bit pixel data.
pixels = new Uint16Array(pixelBufferView_U8.buffer);
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.rgba8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
gOffset = 1;
bOffset = 2;
break;
case Windows.Graphics.Imaging.BitmapPixelFormat.bgra8:
// For 8 bit pixel formats, just use the returned pixel array.
pixels = rawPixels;
// Bgra8 uses a different channel ordering than Rgba8 and Rgba16.
gOffset = 1;
bOffset = 0;
break;
}
switch (decoder.bitmapAlphaMode) {
// For our processing algorithm, ignore alpha mode.
case Windows.Graphics.Imaging.BitmapAlphaMode.premultiplied:
case Windows.Graphics.Imaging.BitmapAlphaMode.ignore:
case Windows.Graphics.Imaging.BitmapAlphaMode.straight:
break;
}
この例では、JavaScript の型指定された配列を使って、アプリが 16 ビット ピクセル データ (Rgba16 ピクセル形式で返される) を処理できるようにします。detachPixelData メソッドは、常に 8 ビット値を含む配列を返します。これは、C++ などの言語における raw バイト バッファーと同じです。Uint16Array を使うと、raw ピクセル配列内のデータに対して、16 ビット値であるかのようにアクセスできます。
注 新しい型指定された配列を作成すると、ピクセル データのメモリ内コピーがもう 1 つ作成されます。非常に大きい画像を編集している場合は、この操作によってアプリのメモリ消費量が増加します。
ステップ 4: ピクセルをループ処理する
ピクセル データを取得してピクセル形式を処理したら、ループ処理し、ピクセル データの処理を実行します。このコードでは、緑色チャネルと青色チャネルを 0 に設定し、赤色チャネルとアルファ チャネルは変更しません。
var orientedHeight = decoder.orientedPixelHeight;
var orientedWidth = decoder.orientedPixelWidth;
for (var i = 0; i < orientedHeight; i++) {
for (var j = 0; j < orientedWidth; j++) {
pixels[(i * orientedHeight + j) * 4 + gOffset] = 0; // Green channel
pixels[(i * orientedHeight + j) * 4 + bOffset] = 0; // Blue channel
}
}
});
}
注 getPixelDataAsync の 0 パラメーター オーバーロードでは、EXIF 方向フラグが画像内に存在している場合、EXIF 方向が常に適用されます。 そのため、画像の大きさを取得するときは、pixelWidth と pixelHeight ではなく、orientedPixelWidth と orientedPixelHeight プロパティを使うことが重要です。 orientedPixelWidth と orientedPixelHeight プロパティは、EXIF 方向による大きさの変更を反映します。