Como selecionar e exibir uma imagem (HTML)

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Descreve como usar os objetos Window.Storage.Pickers.FileOpenPicker e Blob para carregar e exibir uma imagem que o usuário seleciona.

O que você precisa saber

Tecnologias

Pré-requisitos

Você precisa saber criar um aplicativo da Windows Store em JavaScript. Para saber mais, veja Crie o seu primeiro aplicativo da Windows Store em JavaScript.

Instruções

Etapa 1: Crie elementos para seleção e exibição da imagem

Isso cria um botão que o usuário clica para abrir o FileOpenPicker, um parágrafo para exibir informações sobre a imagem e um elemento img para exibir a imagem.

<button id="selectImageButton">Select an image...</button>
<p id="imageInformation"></p>
<img id="imageControl" src="placeholder.png" alt="The selected image" />

Adicione o manipulador de evento loadImage ao seu evento de clique do botão. Este exemplo adiciona o manipulador de evento quando a função WinJS.UI.processAll é concluída. Para saber mais sobre onde anexar manipuladores de eventos, veja Início rápido: Adicionando controles e manipulando eventos.
```
            WinJS.UI.processAll().done(function () {
                document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
            });
```
Defina o manipulador de evento loadImage na próxima etapa.

Etapa 2: Selecionar uma imagem

Para permitir que o usuário selecione uma imagem, crie um novo Window.Storage.Pickers.FileOpenPicker no seu JavaScript e defina o seu fileTypeFilter de acordo com os tipos que você quer disponibilizar. Para exibir o FileOpenPicker, chame o método pickSingleFileAsync.

O pickSingleFileAsync retorna uma promessa para a imagem selecionada; especifique uma função para processar os resultados e uma função para processar erros. Implementamos esses métodos posteriormente neste tópico.

Este exemplo define uma função, loadImage, que cria e exibe um FileOpenPicker. Essa função é chamada quando o usuário clica no selectImageButton que você definiu na etapa anterior.

function loadImage(eventInfo) {

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

Etapa 3: Processe o arquivo selecionado

Defina a função que é chamada quando o usuário seleciona uma imagem com sucesso.

Defina uma função que aceita um StorageFile como parâmetro.
```
function processResults(file)
{

}
```

Verifique se o arquivo existe.

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

Use o método URL.createObjectURL para criar um Blob a partir do 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."); 
    }
}

Use o Blob para definir a propriedade src do seu elemento img. Este exemplo também exibe o nome do arquivo da imagem selecionada.

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

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

Etapa 4: Manipulando erros

Implemente um método que notifica o usuário quando ocorre um erro. Ele aceita uma mensagem de erro como parâmetro.

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

Share via