html 图像怎么编码,如何对新图像进行编码 (HTML)

如何对新图像进行编码 (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。

步骤 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 的静态成员。

现在，你已经具有表示空白 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。

相关主题