Compartilhar via


Como decodificar uma imagem (HTML)

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

Mostramos a você como carregar uma imagem de um arquivo, exibi-la usando a marca <img> e criar um objeto BitmapDecoder da imagem. Um BitmapDecoder permite que você acesse metadados e obtenha dados de pixel das imagens.

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Adicionar uma imagem de espaço reservado

Adicione uma marca <img> ao arquivo HTML.

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

Mais tarde você carregará o arquivo de imagem no objeto myImage.

Etapa 2: Use o seletor de arquivos para selecionar um arquivo de imagem

Crie um novo objeto FileOpenPicker para permitir que o usuário escolha um arquivo que será aberto. Configure a extensão do arquivo para filtrar as imagens JPEG. Exiba o seletor.

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

Observação  Você pode obter uma lista de todas as extensões de arquivo com suporte pelos codecs instalados no sistema usando Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

 

Observação  Se o usuário cancelar, o método pickSingleFileAsync retornará um objeto null.

 

Etapa 3: Exibir a imagem no elemento Image

Crie uma URL de objeto para o arquivo e defina-a como origem do elemento Image.

O método createObjectURL cria uma URL que é respaldada pelos dados de um objeto; por exemplo, StorageFile.

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

Etapa 4: Criar um objeto de decodificador

Abra o arquivo usando o modo de acesso de Leitura para obter um IRandomAccessStream. Crie o objeto BitmapDecoder no fluxo.

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

Comentários

Agora que você tem um decodificador, já pode usá-lo para:

Tópicos relacionados

Como ler metadados de imagens

Como obter dados em pixel

Como codificar uma imagem

Windows.Graphics.Imaging