如何編碼新影像 (HTML)

發行項
02/12/2016

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

以下將說明如何使用 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。您也必須為使用者選取的檔案類型決定正確的編碼器識別碼。這個範例只允許 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) {

注意內建的編碼器識別碼可以做為 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。

共用方式為