新しい画像をエンコードする方法 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

ここでは、BitmapEncoder オブジェクトを使って新しい画像をファイルに保存する方法について説明します。既にある画像に変更を加える方法については、「画像を編集する方法」をご覧ください。

理解しておく必要があること

テクノロジ

必要条件

手順

ステップ 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 の静的メンバーとして使用できます。

 

既に存在するファイルをユーザーが保存先に選んだ場合、BitmapEncoder の出力ストリームを空にする必要があるため、IRandomAccessStream.size は 0 に設定する必要があります。

ここで、空の 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 に設定して、縮小表示の保存を試みると、BMP では縮小表示がサポートされないため、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 を呼び出さないでください。

 

関連トピック

イメージ メタデータを書き込む方法

画像をデコードする方法

画像を編集する方法