如何解码图像 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]
我们将向你展示如何从文件加载图像、使用 <img> 标记显示该图像并从其中创建 BitmapDecoder 对象。 BitmapDecoder 允许你访问元数据并获取图像中的像素数据。
你需要了解的内容
技术
先决条件
- 我们假设你了解如何创建使用 JavaScript 的基本 Windows 运行时应用。有关详细信息，请参阅构建你的第一个使用 JavaScript 的 Windows 运行时应用。
说明
步骤 1: 添加占位符图像
将 <img> 标记添加到 HTML 文件。
<img id="myImage" src="" />
随后，会将图像文件加载到 myImage 对象。
步骤 2: 使用文件选取器选择图像文件
创建新的 FileOpenPicker 对象，以便用户可以选择要打开的文件。设置文件扩展名以筛选 JPEG 图像。随即将显示选取器。
function DecodeImage() {
var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.append(".jpg");
picker.pickSingleFileAsync().then(function (file) {
if (!file) {
注意 你可以通过使用 Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator 获取系统上安装的编解码器支持的所有文件扩展名列表。
注意 如果用户取消，则 pickSingleFileAsync 方法将返回一个空对象。
步骤 3: 显示 Image 元素中的图像
为文件创建对象 URL 并将其设置为 Image 元素的源。
createObjectURL 方法创建对象中数据返回的 URL，例如 StorageFile。
var objectURL = window.URL.createObjectURL(file, { oneTimeOnly: true });
document.getElementById("myImage").src = objectURL;
步骤 4: 创建解码器对象
使用读取访问模式打开文件以获取 IRandomAccessStream。 然后，在数据流上创建 BitmapDecoder 对象。
}).then(function (stream) {
return Windows.Graphics.Imaging.BitmapDecoder.createAsync(stream);
}).done(function (decoder) {
// BitmapDecoder is ready for use.
});
}
备注
因为有了解码器对象，你便可使用它执行以下操作：