Come decodificare un'immagine (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Illustriamo come caricare un'immagine da un file, come visualizzarla usando il tag <img> e come creare un oggetto BitmapDecoder da essa. BitmapDecoder consente di accedere ai metadati e recuperare dati pixel dalle immagini.

Cosa sapere

Tecnologie

Prerequisiti

Istruzioni

Passaggio 1: Aggiungi un'immagine segnaposto

Aggiungi un tag <img> al file HTML.

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

In seguito caricherai il file di immagine nell'oggetto myImage.

Passaggio 2: Usa l'utilità di selezione file per selezionare un file di immagine.

Crea un nuovo oggetto FileOpenPicker per consentire all'utente di selezionare un file da aprire. Imposta l'estensione del file in modo da filtrare le immagini JPEG. Visualizza il selettore file.

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

Nota  Per ottenere un elenco di tutte le estensioni file supportate dai codec installati nel sistema, puoi usare Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

 

Nota  Se l'utente annulla l'operazione, il metodo pickSingleFileAsync restituisce un oggetto null.

 

Passaggio 3: Visualizza l'immagine nell'elemento Image

Crea un URL oggetto per il file e impostalo come origine dell'elemento Image.

Il metodo createObjectURL crea un URL supportato dai dati di un oggetto quale StorageFile.

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

Passaggio 4: Crea l'oggetto decodificatore

Apri il file usando la modalità di accesso in lettura per ottenere un oggetto IRandomAccessStream. A questo punto, crea un oggetto BitmapDecoder nel flusso.

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

Osservazioni

Ora che disponi di un oggetto decodificatore puoi usarlo per:

Argomenti correlati

Come leggere i metadati dell'immagine

Come ottenere i dati pixel

Come codificare un'immagine

Windows.Graphics.Imaging