Comment sélectionner et afficher une image (HTML)

  • Article

[ 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 ]

Découvrez comment utiliser les objets Window.Storage.Pickers.FileOpenPicker et Blob pour charger et afficher une image sélectionnée par l’utilisateur.

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Étape 1: créer des éléments pour sélectionner et afficher l’image

  1. L’exemple suivant crée un bouton sur lequel l’utilisateur clique pour lancer l’objet FileOpenPicker, un paragraphe pour l’affichage d’informations sur l’image, ainsi qu’un élément img pour l’affichage de l’image.

    <button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />

  2. Ajoutez le gestionnaire d’événements loadImage à l’événement click de votre bouton. L’exemple suivant ajoute le gestionnaire d’événements lorsque la fonction WinJS.UI.processAll prend fin. Pour plus d’informations sur l’emplacement auquel vous devez attacher les gestionnaires d’événements, voir Démarrage rapide : ajout de contrôles et gestion des événements.

                WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });

    Vous définissez le gestionnaire d’événements loadImage à l’étape suivante.

Étape 2: sélectionner une image

Pour permettre à l’utilisateur de sélectionner une image, créez un objet Window.Storage.Pickers.FileOpenPicker dans votre code JavaScript et définissez sa propriété fileTypeFilter sur les types d’image que vous souhaitez mettre à sa disposition. Pour afficher l’objet FileOpenPicker, appelez la méthode pickSingleFileAsync.

La méthode pickSingleFileAsync retourne une promesse pour l’image sélectionnée ; spécifiez une fonction pour le traitement des résultats et une fonction pour le traitement des erreurs. (Nous implémenterons ces méthodes, plus loin dans cette rubrique.)

L’exemple suivant définit une fonction, loadImage, qui crée et affiche l’objet FileOpenPicker. Cette fonction est appelée lorsque l’utilisateur clique sur l’objet selectImageButton que vous avez défini à l’étape précédente.

function loadImage(eventInfo) {

    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().then(processResults, displayError);
}

Étape 3: traiter le fichier sélectionné

Définissez la fonction qui est appelée lorsque l’utilisateur sélectionne une image correctement.

  1. Définissez une fonction qui prend un objet StorageFile comme paramètre.

    function processResults(file)
{

}

  2. Vérifiez que le fichier existe.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {

    } else {
        displayError("An image wasn't selected."); 
    }
}

  3. Utilisez la méthode URL.createObjectURL pour créer un objet Blob à partir de l’objet StorageFile.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);

    } else {
        displayError("An image wasn't selected."); 
    }
}

  4. Utilisez l’objet Blob pour définir la propriété src de votre élément img. L’exemple suivant affiche également le nom de fichier de l’image sélectionnée.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

    } else {
        displayError("An image wasn't selected."); 
    }
}

  5. Libérez l’objet Blob.

    function processResults(file) {

    // Check that the picker returned a file. 
    // The picker returns null if the user clicked Cancel.
    if (file) {
        var imageBlob = URL.createObjectURL(file);
        document.getElementById("imageControl").src = imageBlob;


        document.getElementById("imageInformation").innerText =
        "The src of the first image has been set to " + file.name;

        // Release the blob resources.
        URL.revokeObjectURL(imageBlob);
    } else {
        displayError("An image wasn't selected."); 
    }
}

Étape 4: gérer les erreurs

Implémentez une méthode qui informe l’utilisateur qu’une erreur s’est produite. Elle accepte un message d’erreur comme paramètre.

    function displayError(error) {
        if (imageBlob) {
            URL.revokeObjectURL(imageBlob);
        }
        document.getElementById("imageInformation").innerText = error;
    }