Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo compartir una imagen (aplicaciones de la Tienda Windows con JavaScript y HTML)

Posiblemente, el tipo de contenido más común que los usuarios quieren compartir son imágenes y fotos. Aquí, te mostraremos cómo seleccionar una sola imagen desde tu aplicación.

El código de esta sección se centra en el uso de setBitmap para compartir una imagen de mapa de bits. A menudo, los usuarios comparten imágenes que se representan mediante archivos. En consecuencia, te recomendamos que tu aplicación también admita el uso compartido de StorageItems, que puede ser una colección de archivos. Describimos cómo admitir StorageItems en el tema sobre cómo compartir archivos.

Lo que debes saber

Tecnologías

Requisitos previos

Instrucciones

Paso 1: Crear una función de controlador de botón para que el usuario pueda elegir un archivo de imagen

El siguiente código de controlador de botón permite que el usuario seleccione un archivo de imagen. Este archivo se usa en los siguientes pasos de este inicio rápido.


var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

Paso 2: Configurar tu aplicación como origen de contenido compartido

El objeto DataTransferManager es el punto de partida principal para la operación de uso compartido de contenido. Agrega un controlador de eventos datarequested en el objeto DataTransferManager del controlador de eventos activated de tu aplicación. El evento datarequested se produce cuando el usuario invoca el acceso a Compartir.


var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareImageHandler);


Los pasos restantes implementan la función shareImageHandler.

Paso 3: Obtener un objeto DataRequest

Cuando se produce un evento datarequested, tu aplicación recibe un objeto DataRequest. Este objeto contiene un DataPackage que puedes usar para proporcionar el contenido que el usuario quiere compartir.


var request = e.request;


Paso 4: Establecer las propiedades de título y descripción


request.data.properties.title = "Share Image Example";
request.data.properties.description = "Demonstrates how to share an image.";

Paso 5: Agregar una vista en miniatura a DataPackage

Te recomendamos que siempre agregues una imagen en miniatura cada vez que compartas una imagen.


request.data.properties.thumbnail = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);

Consulta el tema de referencia Thumbnail para obtener información sobre nuestros tamaños de archivo recomendados para las imágenes en miniatura.

Paso 6: Agregar la imagen como mapa de bits a DataPackage

Para agregar una imagen, usa el método setBitmap. En este método se espera que la imagen sea del tipo RandomAccessStreamReference. Para compartir varias imágenes, compártelas en su lugar como storageItems. Describimos cómo admitir storageItems en el tema sobre cómo compartir archivos. Esto ayuda a garantizar que el usuario pueda elegir entre la mayor cantidad de aplicaciones al compartir la imagen.


request.data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile));


Observaciones

Si tu aplicación necesita usar una operación asincrónica para preparar la imagen o la miniatura, tendrás que usar el modelo de aplazamiento. Te mostramos como hacerlo en Cómo realizar llamadas asincrónicas en el controlador DataRequested.

Si tu aplicación tarda más de 200 milisegundos en preparar la imagen, necesitas usar una función delegada para compartirla. En el tema sobre cómo admitir operaciones de extracción, te mostramos cómo hacer esto.

Ejemplo completo

A continuación, mostramos un ejemplo que establece una imagen para que un usuario la comparta. Para obtener un ejemplo más detallado, consulta nuestra galería de muestras de código.


var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function shareImageHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share Image Example";
    request.data.properties.description = "Demonstrates how to share an image.";

    // In this example, we use the imageFile for the thumbnail as well.
    request.data.properties.thumbnail = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
    request.data.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile));
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app was newly launched; register it as share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareImageHandler);
            // Set up the button handler to pick an image file.
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};

Temas relacionados

Muestra de una aplicación de origen de contenido compartido
Uso compartido e intercambio de datos
Cómo compartir archivos
Cómo compartir contenido HTML
Cómo compartir un vínculo
Cómo compartir texto
Inicio rápido: compartir contenido
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Mostrar:
© 2018 Microsoft