So wird’s gemacht: Auswählen und Anzeigen von Bildern (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

In diesem Thema wird beschrieben, wie ein vom Benutzer ausgewähltes Bild mit den Objekten Window.Storage.Pickers.FileOpenPicker und Blob geladen und angezeigt wird.

Wissenswertes

Technologien

Voraussetzungen

Sie sollten mit der Erstellung einer einfachen Windows Store-App mit JavaScript vertraut sein. Weitere Informationen finden Sie unter Erstellen Ihrer ersten Windows Store-App mit JavaScript.

Anweisungen

Schritt 1: Erstellen von Elementen zum Auswählen und Anzeigen des Bilds

Dieses Beispiel erstellt eine Schaltfläche, auf die der Benutzer zum Starten des FileOpenPicker klickt, einen Absatz zum Anzeigen von Informationen zum Bild und ein img-Element zum Anzeigen des Bilds.
```
<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />
```
Fügen Sie den loadImage-Ereignishandler dem Klickereignis der Schaltfläche hinzu. In diesem Beispiel wird der Ereignishandler hinzugefügt, wenn die WinJS.UI.processAll-Funktion abgeschlossen ist. Weitere Informationen zum Anfügen von Ereignishandlern finden Sie unter Schnellstart: Hinzufügen von Steuerelementen und Behandeln von Ereignissen.
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
Sie definieren den loadImage-Ereignishandler im nächsten Schritt.

Schritt 2: Auswählen eines Bilds

Damit der Benutzer ein Bild auswählen kann, erstellen Sie einen neuen Window.Storage.Pickers.FileOpenPicker im JavaScript und legen dessen fileTypeFilter-Eigenschaft auf die Bildtypen fest, die Sie verfügbar machen möchten. Um den FileOpenPicker anzuzeigen, rufen Sie die pickSingleFileAsync-Methode auf.

Die pickSingleFileAsync-Methode gibt eine Zusage für das ausgewählte Bild zurück. Geben Sie eine Funktion für die Verarbeitung der Ergebnisse und eine Funktion für die Verarbeitung von Fehlern an. (Diese Methoden werden weiter unten in diesem Thema implementiert.

Dieses Beispiel definiert eine Funktion (loadImage), die den FileOpenPicker erstellt und anzeigt. Diese Funktion wird aufgerufen, wenn der Benutzer auf den selectImageButton klickt, den Sie im vorherigen Schritt definiert haben.

function loadImage(eventInfo) {

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

Schritt 3: Verarbeiten der ausgewählten Datei

Definieren Sie die Funktion, die aufgerufen wird, wenn der Benutzer ein Bild ausgewählt hat.

Definieren Sie eine Funktion, die StorageFile als Parameter verwendet.
```
function processResults(file)
{

}
```

Stellen Sie sicher, dass die Datei vorhanden ist.

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."); 
    }
}

Erstellen Sie mit der URL.createObjectURL-Methode einen Blob aus dem 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."); 
    }
}

Verwenden Sie den Blob, um die src-Eigenschaft Ihres img-Elements festzulegen. Dieses Beispiel zeigt auch den Dateinamen des ausgewählten Bilds an.

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."); 
    }
}

Geben Sie den Blob frei.

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."); 
    }
}

Schritt 4: Behandeln von Fehlern

Implementieren Sie eine Methode, die den Benutzer über einen Fehler benachrichtigt. Sie sollte eine Fehlermeldung als Parameter verwenden.

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

Freigeben über