Cómo seleccionar y mostrar una imagen (HTML)

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

Aprende a usar los objetos Window.Storage.Pickers.FileOpenPicker y Blob para cargar y mostrar una imagen seleccionada por el usuario.

Lo que debes saber

Tecnologías

• Aplicaciones de la Tienda Windows con JavaScript
• Blob
• Windows.Storage

Requisitos previos

• Debes saber crear una aplicación de la Tienda Windows básica con JavaScript. Para obtener más información, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.

Instrucciones

Paso 1: Crear elementos para seleccionar y visualizar la imagen

1. En este ejemplo se crea un botón en el que el usuario hace clic para iniciar FileOpenPicker, un párrafo para mostrar información sobre la imagen, y un elemento img para mostrar la imagen.

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

2. Agrega el controlador de eventos loadImage al evento click del botón. En este ejemplo se agrega el controlador de eventos cuando se completa la función WinJS.UI.processAll. Para obtener más información sobre dónde se deben conectar los controladores de eventos, consulta Inicio rápido: Agregar controles HTML y administrar eventos.

               WinJS.UI.processAll().done(function () {
                   document.getElementById("selectImageButton").addEventListener("click", loadImage, false);
               });
   

   En el siguiente paso, definirás el controlador de eventos loadImage.

Paso 2: Seleccionar una imagen

Para que el usuario pueda seleccionar una imagen, crea un nuevo Window.Storage.Pickers.FileOpenPicker en JavaScript y establece su fileTypeFilter en los tipos de imagen que quieres que estén disponibles. Para visualizar el FileOpenPicker, llama al método pickSingleFileAsync.

El pickSingleFileAsync devuelve una promesa para la imagen seleccionada: especifica una función para procesar los resultados y otra función para procesar los errores. (Implementaremos estos métodos más adelante en este tema.)

En este ejemplo se define una función, loadImage, que crea y muestra FileOpenPicker. Se llama a esta función cuando el usuario hace clic en el selectImageButton que definiste en el paso anterior.

function loadImage(eventInfo) {

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

Paso 3: Procesar el archivo seleccionado

Define la función a la que se llama cuando el usuario selecciona una imagen.

1. Define una función que toma un StorageFile como parámetro.

   function processResults(file)
   {
   
   }
   

2. Comprueba que el archivo 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."); 
       }
   }
   

3. Usa el método URL.createObjectURL para crear un Blob a partir del 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."); 
       }
   }
   

4. Usa el objeto Blob para establecer la propiedad src del elemento img. En este ejemplo también se muestra el nombre de archivo de la imagen seleccionada.

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

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

Paso 4: Administrar errores

Implementa un método que notifique al usuario que se produjo un error. Acepta un mensaje de error como parámetro.

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