Como copiar e colar imagens
Recolher sumário
Expandir sumário

Como copiar e colar imagens (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]

Os usuários esperam copiar e colar imagens usando a Área de Transferência. Este tópico mostra como dar suporte à cópia e colagem de imagens no seu aplicativo.

Veja nosso exemplo de aplicativo de área de transferência para conhecer exemplos abrangentes que mostram como copiar e colar diferentes tipos de dados.

O que você precisa saber

Tecnologias

Pré-requisitos

Copiando imagens na área de transferência

  1. Recupere a imagem que o usuário quer copiar. O exemplo a seguir usa o seletor de arquivos para permitir que o usuário especifique uma imagem da pasta Imagens. Para saber mais sobre o seletor de arquivos, veja Guia de início rápido: acessando arquivos com o seletor de arquivos. Para saber mais sobre outras maneiras de acessar arquivos, veja Acessando dados e arquivos.
    
    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. Crie o objeto DataPackage. Recupere um objeto RandomAccessStreamReference que representa os dados da imagem no arquivo selecionado e adicione os arquivos a ele.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  3. Recupere um objeto RandomAccessStreamReferenceque represente a imagem no arquivo selecionado. Use o método setBitmap para adicionar o fluxo da imagem ao objeto DataPackage.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    dataPackage.setBitmap(Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(file));
    
    
    
  4. Copie o conteúdo do DataPackage na Área de Transferência.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Colando imagens da área de transferência

  1. Obtenha o conteúdo da área de transferência como um objeto DataPackageView.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Verifique se o DataPackageView contém um bitmap e, se tiver, recupere-o. Esse exemplo recupera o bitmap e cria uma URL a ser usada como o atributo src de uma marca 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");
        }
        ....
    }
    
    

Exemplos completos

Esse exemplo mostra como copiar uma imagem que o usuário seleciona com o seletor de arquivos.


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

O exemplo a seguir recupera uma imagem da área de transferência.


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

Tópicos relacionados

Guia de início rápido: noções básicas sobre área de transferência
Como copiar e colar HTML
Como copiar e colar arquivos
Diretrizes e lista de verificação de comandos da área de transferência
DataPackage
Windows.ApplicationModel.DataTransfer
Exemplo de aplicativo de área de transferência

 

 

Mostrar:
© 2016 Microsoft