画像をデコードする方法 (HTML)

  • [アーティクル]

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

ここでは、ファイルから画像を読み込み、<img> タグを使って表示したり、BitmapDecoder オブジェクトを作成したりする方法について説明します。 BitmapDecoder により、メタデータにアクセスし、画像からピクセル データを取得できます。

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

テクノロジ

必要条件

手順

ステップ 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: 画像要素に画像を表示する

ファイルのオブジェクト URL を作成し、画像要素のソースとして設定します。

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