如何获取使用特定格式的像素数据 (HTML)

2016-02-12

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

我们将向你展示如何使用 BitmapDecoder 对象从图像获取像素数据。像素可打包为字节数组，且你可在请求数据时指定格式。

你可以指定 BitmapDecoder 产生的像素数据的以下这些属性：

像素格式 (BitmapPixelFormat)。
Alpha 模式 (BitmapAlphaMode)。
翻转、旋转、缩放和/或裁剪操作 (BitmapTransform)。
是否代表嵌入的 EXIF 方向标志 (ExifOrientationMode)。
是否对 sRGB 颜色空间执行颜色管理 (ColorManagementMode)。

如果你需要很好地控制解码行为，或者如果你的应用期望像素数据采用某种特定格式，则指定这些属性会很有用。例如，如果你要与 HTML Canvas Context2D API 相互操作，则必须提供像素数据作为 Rgba8 和 straight 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 模式设置为 straight。当返回像素数据时，处理代码基于这个假设进行工作。除了代表 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 方向产生的分辨率上的任何更改。

通过