如何取得特定格式的像素資料 (HTML)

發行項
02/12/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

以下將說明如何使用 BitmapDecoder 物件取得影像的像素資料。像素是包裝成位元組陣列，而且要求資料時，您可以指定格式。

您可以指定 BitmapDecoder 產生之像素資料的下列屬性：

像素格式 (BitmapPixelFormat)。
Alpha 模式 (BitmapAlphaMode)。
翻轉、旋轉、縮放和/或裁剪操作 (BitmapTransform)。
是否涉及內嵌的 EXIF 方向旗標 (ExifOrientationMode)。
是否執行 sRGB 色彩空間的色彩管理 (ColorManagementMode)。

如果您需要妥善控制解碼行為，或是如果您的應用程式預期像素資料是特定格式，這就很有用。例如，如果您正在與 HTML Canvas Context2D API 交互操作，您必須以 Rgba8 和直向 Alpha 格式提供像素資料。

您必須知道的事

技術

先決條件

我們假設您可以使用 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，而 Alpha 模式設為直向。傳回像素資料時，處理程式碼會根據這個假設來運作。除了涉及 EXIF 方向之外，我們不套用任何轉換，並啟用色彩管理。

注意如果您呼叫不含引數的 getPixelDataAsync，方法就會以原始格式傳回像素資料。請參閱如何取得預設格式的像素資料以了解詳細資訊。

步驟 3: 從資料提供者取得像素

呼叫 detachPixelData 方法來取得像素資料的位元組陣列。

      var pixels = pixelDataProvider.detachPixelData()

detachPixelData 函式會同步傳回像素資料的位元組陣列。這個範例是以 Rgba8 像素格式要求像素資料，因此，陣列中的每個元素都會對應單一色彩通道值。

注意您只能呼叫一次 detachPixelData。所有後續呼叫都會失敗。如果要再次取得像素，必須呼叫 getPixelDataAsync 以取得新的像素資料提供者。

步驟 4: 循環顯示像素

因為有像素資料，就可以處理這些資料。這裡的程式碼清除了綠色和藍色色板，只留下紅色和 Alpha 色板。

        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 方向的像素資料。因此，當您想取得影像維度時，使用 orientedPixelWidth 和 orientedPixelHeight 屬性 (而非 pixelWidth 和 pixelHeight) 是很重要的。orientedPixelWidth 和 orientedPixelHeight 屬性會反映因為 EXIF 方向而產生的任何維度變更。

共用方式為