So wird’s gemacht: Decodieren von Bildern (HTML)
[ 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
- Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript
- Windows.Storage.Pickers
- Windows.Graphics.Imaging
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.