Comment décoder une image (HTML)

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Cette rubrique vous explique comment charger une image à partir d’un fichier, comment l’afficher à l’aide de la balise <img> et comment créer un objet BitmapDecoder à partir de cette image. Un objet BitmapDecoder vous permet d’accéder aux métadonnées et de récupérer des données de pixels à partir d’images.

Ce que vous devez savoir

Technologies

Prérequis

Nous partons du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour plus d’informations, voir Création de votre première application Windows Runtime en JavaScript.

Instructions

Étape 1: Ajouter une image d’espace réservé

Ajoutez une balise <img> à votre fichier HTML.

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

Vous chargerez plus tard le fichier image dans l’objet myImage.

Étape 2: Utiliser le sélecteur de fichiers pour choisir un fichier image

Créez un nouvel objet FileOpenPicker pour permettre à l’utilisateur de sélectionner un fichier à ouvrir. Définissez l’extension de fichier afin de filtrer et rechercher des images JPEG. Affichez ensuite le sélecteur.

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

Remarque Vous pouvez vous procurer une liste de toutes les extensions de fichiers prises en charge par les codecs installés sur le système à l’aide de Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

Remarque Si l’utilisateur annule, la méthode pickSingleFileAsync renvoie un objet Null.

Étape 3: Afficher l’image dans l’élément Image

Créez une URL d’objet pour le fichier et définissez-la comme source de l’élément Image.

La méthode createObjectURL crée une URL soutenue par les données d’un objet tel que StorageFile.

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

Étape 4: Créer l’objet de décodeur

Ouvrez le fichier en mode d’accès en lecture pour ouvrir une interface IRandomAccessStream. Créez ensuite un objet BitmapDecoder dans le flux.

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

Remarques

À présent que vous avez un objet décodeur, vous pouvez l’utiliser pour :

lire les métadonnées depuis l’image. Pour plus d’informations, voir Comment lire des métadonnées d’image.
vous procurer les données de pixels à partir de l’image. Pour plus d’informations, voir Comment obtenir des données de pixels.
créer un encodeur par transcodage. Pour plus d’informations, voir Comment coder une image.