How to decode an image (HTML)

Article
10/13/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

We show you how to load an image from a file, display it using the <img> tag, and create a BitmapDecoder object from it. A BitmapDecoder lets you access metadata and get pixel data from images.

What you need to know

Technologies

Prerequisites

We assume you know how to create a basic Windows Runtime app using JavaScript. For more info, see Building your first Windows Windows Runtime app using JavaScript.

Instructions

Step 1: Add a placeholder image

Add a <img> tag to your HTML file.

<img id="myImage" src="" />

You will later load the image file into the myImage object.

Step 2: Use the file picker to pick an image file

Create a new FileOpenPicker object to let the user select a file to be opened. Set the file extension to filter for JPEG images. Then, display the picker.

function DecodeImage() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.append(".jpg");
    picker.pickSingleFileAsync().then(function (file) {
        if (!file) {

Note You can get a list of all the file extensions supported by the codecs installed on the system by using Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

Note If the user cancels, the pickSingleFileAsync method returns a null object.

Step 3: Display the image in the Image element

Create an object URL for the file and set it as the source of the Image element.

The createObjectURL method creates a URL that is backed by data from an object such as StorageFile.

            var objectURL = window.URL.createObjectURL(file, { oneTimeOnly: true });
            document.getElementById("myImage").src = objectURL;

Step 4: Create the decoder object

Open the file using the Read access mode to get an IRandomAccessStream. Then create a BitmapDecoder object on the stream.

    }).then(function (stream) {
        return Windows.Graphics.Imaging.BitmapDecoder.createAsync(stream);
    }).done(function (decoder) {
        // BitmapDecoder is ready for use.
    });
}