So wird’s gemacht: Decodieren von Bildern (HTML)

Artikel
02/16/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 dieser Anleitung wird beschrieben, wie ein Bild aus einer Datei geladen, mithilfe des <img>-Tags angezeigt und daraus ein BitmapDecoder-Objekt erstellt wird. Mit BitmapDecoder können Sie auf Metadaten zugreifen und Pixeldaten aus Bildern abrufen.

Wissenswertes

Technologien

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können. Weitere Informationen finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.

Anweisungen

Schritt 1: Hinzufügen eines Platzhalterbilds

Fügen Sie Ihrer HTML-Datei ein <img>-Tag hinzu.

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

Sie laden die Bilddatei später in das myImage-Objekt.

Schritt 2: Auswählen einer Bilddatei mit der Dateiauswahl

Erstellen Sie ein neues FileOpenPicker-Objekt, mit dem die zu öffnende Datei ausgewählt werden kann. Stellen Sie die Filtererweiterung so ein, dass nach JPEG-Bildern gefiltert wird. Zeigen Sie dann die Dateiauswahl an.

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

Hinweis Eine Liste aller Erweiterungen, die von den im System installierten Codecs unterstützt werden, erhalten Sie mit Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

Hinweis Wenn der Benutzer den Vorgang abbricht, gibt die pickSingleFileAsync-Methode ein Null-Objekt zurück.

Schritt 3: Anzeigen des Bilds im Image-Element

Erstellen Sie eine Objekt-URL für die Datei, und legen Sie diese als Quelle für das Image-Element fest.

Die createObjectURL-Methode erstellt eine URL, hinter der Daten eines Objekts wie StorageFile stehen.

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

Schritt 4: Erstellen des Decoderobjekts

Öffnen Sie die Datei im Read-Zugriffsmodus als IRandomAccessStream. Erstellen Sie dann für den Stream ein BitmapDecoder-Objekt.

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

Anmerkungen

Nachdem Sie nun über ein Decoderobjekt verfügen, können Sie:

Metadaten aus dem Bild lesen, Weitere Informationen finden Sie unter So wird's gemacht: Lesen von Bildmetadaten.
Pixeldaten aus dem Bild abrufen. Weitere Informationen finden Sie unter So wird's gemacht: Abrufen von Pixeldaten.
Erstellen eines Encoders durch Transcodierung. Weitere Informationen finden Sie unter So wird's gemacht: Codieren von Bildern.

Share via