Partager via


Comment décoder une image (HTML)

[ 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

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 :

Rubriques associées

Comment lire les métadonnées d’image

Comment obtenir des données de pixel

Comment encoder une image

Windows.Graphics.Imaging