Cómo descodificar una imagen (HTML)

Artículo
02/16/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Te mostramos cómo cargar una imagen de un archivo, mostrarla con la etiqueta <img> y crear un objeto BitmapDecoder a partir del archivo de imagen. BitmapDecoder permite acceder a los metadatos y obtener datos de píxeles de las imágenes.

Lo que debes saber

Tecnologías

Requisitos previos

Suponemos que sabes cómo crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de Windows en tiempo de ejecución con JavaScript.

Instrucciones

Paso 1: Agregar una imagen de marcador de posición

Agrega una etiqueta <img> al archivo HTML.

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

Más tarde cargarás el archivo de imagen en el objeto myImage.

Paso 2: Usar el selector de archivos para seleccionar un archivo de imagen

Crea un nuevo objeto FileOpenPicker para permitir que el usuario seleccione el archivo que quiere abrir. Establece la extensión de archivo para filtrar imágenes JPEG. A continuación, muestra el selector.

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

Nota Puedes obtener una lista de todas la extensiones de archivo que admiten los códecs instalados en el sistema utilizando Windows.Graphics.Imaging.BitmapDecoder.getDecoderInformationEnumerator.

Nota Si el usuario cancela la acción, el método pickSingleFileAsync devuelve un objeto null.

Paso 3: Mostrar la imagen en el elemento Image

Crea una dirección URL de objeto para el archivo y establécela como el origen del elemento Image.

El método createObjectURL crea una dirección URL respaldada por datos de un objeto como StorageFile.

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

Paso 4: Crear un objeto descodificador

Abre el archivo mediante el modo de acceso de lectura para obtener una IRandomAccessStream. A continuación, crea un objeto BitmapDecoder en la secuencia.

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

Observaciones

Ahora que tienes un objeto descodificador, puedes usarlo para:

Leer metadatos de la imagen. Para obtener más información, consulta Cómo leer metadatos de imagen.
Obtener datos de píxeles de la imagen. Para más información, consulta Cómo obtener datos de píxeles.
Crear un descodificador mediante transcodificación. Para obtener más información, consulta Cómo codificar una imagen.