Language: HTML | XAML

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

Applies to Windows and Windows Phone

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

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:

Verwandte Themen

Lesen von Bildmetadaten
Abrufen von Pixeldaten
Codieren von Bildern
Windows.Graphics.Imaging

 

 

Anzeigen:
© 2014 Microsoft