如何解碼影像 (HTML)

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

這裡將說明如何從檔案載入影像、使用 <img> 標記顯示影像，以及從影像建立 BitmapDecoder 物件。 BitmapDecoder 可以讓您從影像存取中繼資料以及取得像素資料。

您必須知道的事

技術

• 使用 JavaScript 建立您的第一個 Windows 執行階段應用程式
• Windows.Storage.Pickers
• Windows.Graphics.Imaging

先決條件

• 我們假設您知道如何使用 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 方法會傳回 Null 物件。

 

步驟 3: 在 Image 元素中顯示影像

為檔案建立物件 URL，並將它設為 Image 元素的來源。

createObjectURL 方法會建立物件 (例如 StorageFile) 中的資料支援的 URL。

            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.
    });
}

備註

現在您已經有解碼器物件，可以用它來：

• 從影像讀取中繼資料。如需詳細資訊，請參閱如何讀取影像中繼資料。
• 從影像取得像素資料。如需詳細資訊，請參閱如何取得像素資料。
• 透過轉碼建立編碼器。如需詳細資訊，請參閱如何編碼影像。

相關主題

如何讀取影像中繼資料

如何取得像素資料

如何編碼影像

Windows.Graphics.Imaging