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

Cómo copiar y pegar imágenes (aplicaciones de la Tienda Windows con JavaScript y HTML)

Los usuarios esperan poder copiar y pegar imágenes usando el Portapapeles. En este tema se muestra cómo admitir la acción de copiar y pegar imágenes en las aplicaciones.

Consulta nuestra aplicación de muestra de Portapapeles para obtener ejemplos completos que indiquen cómo copiar y pegar otros tipos de datos.

Lo que debes saber

Tecnologías

Requisitos previos

Copiar una imagen al Portapapeles

  1. Recupera una imagen que el usuario desea copiar. En el ejemplo siguiente se usa el selector de archivos para permitir al usuario seleccionar una imagen desde la biblioteca de imágenes. Para obtener más información sobre el selector de archivos, consulta el tema sobre inicio rápido: acceso a archivos mediante selectores de archivos. Para obtener más información sobre otros métodos para acceder a archivos, consulta el tema sobre el acceso a datos y archivos.
    
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);
    picker.pickSingleFileAsync().done(function (file) {
        if (file) {
            ...
        }
        ...
    });
    
    
    
  2. Crea el objeto DataPackage. Recupera un objeto RandomAccessStreamReference que represente los datos de imagen en el archivo seleccionado, y agrega los archivos a él.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  3. Recupera un objeto RandomAccessStreamReference que represente los datos de la imagen en el archivo seleccionado. Usa el método setBitmap para agregar la secuencia de imágenes al objeto DataPackage.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  4. Copia el contenido de DataPackage al Portapapeles.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Pegar una imagen del Portapapeles

  1. Obtén el contenido del Portapapeles como un objeto DataPackageView.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Comprueba si DataPackageView contiene un mapa de bits y, de ser así, recupéralo. En este ejemplo se recupera el mapa de bits y se crea una dirección URL para usarla como el atributo src de una etiqueta img:
    
    
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
        dataPackageView.getBitmapAsync().then(function (streamRef) {
            return streamRef.openReadAsync();
        }).done(function (bitmapStream) {
            var blob = window.MSApp.createBlobFromRandomAccessStream(bitmapStream.contentType, bitmapStream);
            document.getElementById("imageHolder").src = window.URL.createObjectURL(blob, { oneTimeOnly: true });
                document.getElementById("imageHolder").style.visibility = "visible";
                displayStatus("Image pasted from Clipboard");
        }
        ....
    }
    
    

Ejemplos completos

En este ejemplo se muestra cómo copiar una imagen que el usuario selecciona con el selector de archivos.


function copyImage() {
	   // User the file picker to let the user choose an image.
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    picker.fileTypeFilter.replaceAll([".jpg", ".jpeg", ".png", ".bmp"]);
    picker.pickSingleFileAsync().done(function (file) {
        if (file) {
            var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

            // Add the selected image to the DataPackage.
            dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));

            try {
                // Copy the content to the Clipboard.
                Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

            } catch (e) {
                // Copying data to the Clipboard can fail if, for example, another application is holding the 
                // Clipboard open.
                displayError("Error copying content to Clipboard: " + e + ". Try again.");
            }

        } else {
             displayStatus("No image selected");
        }
    });
}

En el ejemplo siguiente se recupera una imagen del Portapapeles.


function pasteImage() {
    // Get the content from the Clipboard.
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap)) {
        dataPackageView.getBitmapAsync().then(function (streamRef) {
            return streamRef.openReadAsync();
        }).done(function (bitmapStream) {
            var blob = window.MSApp.createBlobFromRandomAccessStream(bitmapStream.contentType, bitmapStream);
            document.getElementById("imageHolder").src = window.URL.createObjectURL(blob, { oneTimeOnly: true });
                document.getElementById("imageHolder").style.visibility = "visible";
                displayStatus("Image pasted from Clipboard");
        }, function (e) {
            displayError("Error retrieving image stream: " + e);
        });
    } else {
        displayStatus("No image on Clipboard");
    }
}

Temas relacionados

Inicio rápido: conceptos básicos sobre el Portapapeles
Cómo copiar y pegar HTML
Cómo copiar y pegar archivos
Directrices y lista de comprobación de comandos del Portapapeles
DataPackage
Windows.ApplicationModel.DataTransfer
Aplicación de muestra de Portapapeles

 

 

Mostrar:
© 2018 Microsoft