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

• Compilando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript
• Windows.Storage.Pickers
• Windows.Graphics.Imaging

Pré-requisitos

• Supomos que você saiba como criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter mais informações, veja Compilando seu primeiro aplicativo do Tempo de Execução do Windows em JavaScript.

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:

• Ler metadados de uma imagem. Para saber mais, veja Como ler metadados de imagens.
• Obtenha dados de pixel da imagem. Para saber mais, veja Como obter os dados de pixel.
• Criar um codificador por transcodificação. Para saber mais, veja Como codificar uma imagem.

Tópicos relacionados

Como ler metadados de imagens

Como obter dados em pixel

Como codificar uma imagem

Windows.Graphics.Imaging