Come selezionare e visualizzare un'immagine (HTML)

Articolo
03/04/2016

[ 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 ]

Impara a usare gli oggetti Window.Storage.Pickers.FileOpenPicker e Blob per caricare e visualizzare un'immagine selezionata dall'utente.

Cosa sapere

Tecnologie

Prerequisiti

Dovresti essere in grado di creare una semplice app di Windows Store in JavaScript. Per ulteriori informazioni, vedi Creazione della prima app di Windows Store in JavaScript.

Istruzioni

Passaggio 1: Creare gli elementi per la selezione e la visualizzazione dell'immagine

Questo esempio crea un pulsante sul quale l'utente fa clic per avviare FileOpenPicker, un paragrafo per visualizzare le informazioni relative all'immagine e un elemento img per visualizzare l'immagine.
```
<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />
```
Aggiungi il gestore eventi loadImage all'evento Click del pulsante. Questo esempio aggiunge il gestore eventi al completamento della funzione WinJS.UI.processAll. Per altre informazioni sulle posizioni in cui collegare i gestori eventi, vedi Guida introduttiva: Aggiunta di controlli e gestori di eventi.
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
Nel passaggio successivo si definisce il gestore eventi loadImage.

Passaggio 2: Selezionare un'immagine

Per consentire all'utente di selezionare un'immagine, devi creare un nuovo oggetto Window.Storage.Pickers.FileOpenPicker nel codice JavaScript e impostare il relativo fileTypeFilter sui tipi di immagine che vuoi rendere disponibili. Per visualizzare FileOpenPicker, devi chiamare il metodo pickSingleFileAsync.

pickSingleFileAsync restituisce una promessa per l'immagine selezionata. Specifica una funzione per l'elaborazione dei risultati e una funzione per l'elaborazione degli errori Implementeremo questi metodi più avanti in questo argomento.

Questo esempio definisce una funzione loadImage che crea e visualizza FileOpenPicker e che viene chiamata quando l'utente fa clic sull'oggetto selectImageButton definito nel passaggio precedente.

function loadImage(eventInfo) {

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

Passaggio 3: Elaborare il file selezionato

Devi ora definire la funzione che viene chiamata quando l'utente seleziona correttamente un'immagine.

Definisci una funzione che accetta StorageFile come parametro.
```
function processResults(file)
{

}
```

Verifica che il file esista.

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

Usa il metodo URL.createObjectURL per creare un Blob da 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."); 
    }
}

Usa il Blob per impostare la proprietà src dell'elemento img. Questo esempio riporta anche il nome del file dell'immagine selezionata.

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

Rilascia il Blob.

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

Passaggio 4: Gestire gli errori

Implementa un metodo per notificare all'utente che si è verificato un errore. Accetta un messaggio di errore come parametro.

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

Condividi tramite