如何对新图像进行编码 (HTML)

项目
02/12/2016

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

我们向你展示如何使用 BitmapEncoder 对象将新图像保存到文件中。如果你希望更改现有图像，请参阅如何编辑图像。

你需要了解的内容

技术

先决条件

我们假设你能够创建使用 JavaScript 的基本 Windows 运行时应用。有关详细信息，请参阅构建你的第一个使用 JavaScript 的 Windows 运行时应用。

说明

步骤 1: 使用文件选取器来选取目标文件

使用 FileSavePicker，用户可以从其系统中选取一个新文件或现有文件。在通过选取器获取文件后，可以将该文件用作 BitmapEncoder 的目标文件。

首先，创建新的文件选取器对象、设置文件类型选项以允许 JPEG 图像，并向用户显示选取器。

// variables to store objects across multiple async operations
var encoder;
var fileType;
var stream;

var picker = new Windows.Storage.Pickers.FileSavePicker();
        
picker.fileTypeChoices.insert("JPEG file", [".jpg"]);
picker.defaultFileExtension = "jpg";
picker.suggestedFileName = "untitled";

picker.pickSaveFileAsync().then(function (file) {

            if (!file) {
                // The user did not select a file.
                return;
            }

            fileType = file. fileType;

注意你可以向文件类型筛选器中添加更多扩展名。有关详细信息，请参阅 Windows.Storage.Pickers。

注意你可以使用 Windows.Graphics.Imaging.BitmapEncoder.getEncoderinfoEnumerator 获取所有支持的编码器和文件扩展名的列表。

步骤 2: 创建新图像的编码器对象

在具有目标文件时，从文件中获取具有 ReadWrite 访问权限的 IRandomAccessStream，将其用于实例化 BitmapEncoder。你还需要确定用户所选的文件类型的正确编码器 ID。此示例仅允许 JPEG 图像，因此如果你允许多种文件类型，则需要根据文件的 FileType 参数进行切换。

        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
        }).then(function (_stream) {
        stream = _stream;
              stream.size = 0;

        var encoderId;
        switch (fileType) {
            case ".jpg":
                encoderId = Windows.Graphics.Imaging.BitmapEncoder.jpegEncoderId;
                break;
        }
        return Windows.Graphics.Imaging.BitmapEncoder.createAsync(encoderId, stream);
        }).then(function (encoder) {

注意内置编码器 ID 用作 BitmapEncoder 的静态成员。

如果用户选择保存到已存在的文件，则必须将 IRandomAccessStream.size 设置为 0，因为 BitmapEncoder 要求输出流为空。

现在，你已经具有表示空白 JPEG 图像的 BitmapEncoder 了。

步骤 3: 设置编码器上的某些数据

由于你已经拥有 BitmapEncoder 对象，因此可以设置元数据和像素数据，并可以控制缩略图和转换（例如，旋转和缩放）。

此处代码设置一个简单像素数据数组。有关设置图像属性和元数据的详细信息，请参阅如何写入图像元数据。

            // An array representing 2x2 red, opaque pixel data
            var pixels = [255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255];

            encoder.setPixelData(
                Windows.Graphics.Imaging.BitmapPixelFormat.rgba8,
                Windows.Graphics.Imaging.BitmapAlphaMode.straight,
                2, // pixel width
                2, // pixel height
                96, // horizontal DPI
                96, // vertical DPI
                pixels
                );

注意如果使用 CreateAsync 方法创建 BitmapEncoder，则为创建有效图像而必须提供的最少信息为使用 SetPixelData 方法的像素数据。

步骤 4: 保存对文件的更改

在执行编辑 BitmapEncoder 时，在使用该文件前必须刷新编码器并关闭基本流。如果不这么做，则不会保存图像并将丢失数据。

最后，处理所有错误。如果尝试执行文件格式不支持的或者无效的编码操作，则在调用 FlushAsync 前不会遇到错误。即，如果尝试采用某种格式（例如，不支持缩略图的 BMP 格式）通过将 IsThumbnailGenerated 设置为 True 来保存缩略图，则会导致 FlushAsync 失败。

        return encoder.flushAsync();
        }).then(function () {
            // This means the encoder saved successfully.
        }, function (error) {
            // There was an error encoding, error.message has the error string.
        }).done(null, function () {
            // Close the stream regardless of whether encoding was successful. Otherwise it will continue to be locked for Read/Write access.
            stream && stream.close();
        });
 }

注意调用 FlushAsync 函数时，编码器保存，因此必须重新创建编码器才能执行更多操作。如果你打算稍后使用编码器，则只有在编码器使用完成后才可调用 FlushAsync。

通过