Idioma: HTML | XAML

Como copiar e colar imagens HTML (HTML)

Applies to Windows only

A cópia e colagem de conteúdo HTML é diferente de outros formatos básicos, como texto ou links. O principal desafio é que o conteúdo pode conter referências a outro conteúdo. Por exemplo, ele pode contar marcas img cujos atributos src referenciam arquivos de imagem armazenados localmente. Quando os usuários copiam esse conteúdo, eles esperam incluir o texto e as imagens. Aplicativos que dão suporte à cópia e colagem de HTML precisam considerar como manipular essas referências para garantir que os usuários vão copiar e colar o conteúdo desejado.

Para ajudar você a copiar e colar HTML da maneira esperada pelos usuários, o namespace Windows.ApplicationModel.DataTransfer inclui algumas funções que ajudam a capturar elementos referenciados, tais como imagens. Vamos mostrar como.

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

  • Você precisa estar familiarizado com o Guia de início rápido: Noções básicas sobre área de transferência.
  • Você deve saber como usar JavaScript para identificar o HTML selecionado por um usuário e encontrar instâncias de objetos filho, como as marcas img nessa seleção
  • Você deve estar familiarizado com o Visual Studio e com os modelos a ele associados.
  • Você deve estar familiarizado com JavaScript.

Copiando HTML na área de transferência

  1. Crie o objeto DataPackage.
    
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
    
    
  2. Obtenha o conteúdo HTML.

    Aqui nós obtemos conteúdo de um elemento HTML:

    
    var htmlFragment = document.getElementById("htmlTextToCopy").innerHTML;
    
    
  3. Prepare o conteúdo HTML para operações de área de transferência.

    Use o método HtmlFormatHelper.CreateHtmlFormat para preparar o conteúdo HTML. Esse método adiciona os cabeçalhos necessários e garante a formatação correta do HTML para operações de área de transferência.

    
    var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlFragment);
    
    
  4. Adicione o conteúdo HTML ao objeto DataPackage.
    
    dataPackage.setHtmlFormat(htmlFormat);
    
    
  5. Popule o mapa de recursos com as referências de conteúdo.

    Se o usuário tiver selecionado HTML contendo referências a outro conteúdo – por exemplo, arquivos de imagem armazenados localmente – você precisará acrescentar essas referências à propriedade DataPackage.ResourceMap. Estas são as etapas necessárias para adicionar uma referência de imagem:

    1. Primeiro, obtenha as informações de caminho no atributo src da marca img inserida no conteúdo HTML.
    2. Converta as informações de caminho em URI (Uniform Resource Identifier).
    3. Obtenha um objeto RandomAccessStreamReference para o arquivo de imagem local.
    4. Adicione RandomAccessStreamReference à propriedade DataPackage.ResourceMap.
    
    var imagePath = document.getElementById("localImage").src;
    var imageUri = new Windows.Foundation.Uri(imagePath);
    var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(imageUri);
    dataPackage.resourceMap.insert(imagePath, streamRef);
    
    
  6. Copie o conteúdo do na Área de Transferência.
    
    Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
    
    

Colando HTML da área de transferência

  1. Obtenha o conteúdo da área de transferência.
    
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    
    
  2. Verifique se a área de transferência contém dados HTML.
    
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
       ...
    }
    
    
  3. Se a área de transferência contiver HTML, recupere-o e adicione-o ao DOM (Document Object Model), conforme indicado pelo usuário.

    Cuidado  Lembre-se de que o HTML originado em outro aplicativo não é confiável e você não deve exibi-lo, a menos que tenha certeza de que o HTML não inclui conteúdo dinâmico. Use o método DataTransfer.HtmlFormatHelper.GetStaticFragment para obter conteúdo HTML compartilhado sem qualquer elemento dinâmico; por exemplo, marcas de script.

    
    
    var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
    document.getElementById("htmlOutput").innerHTML = htmlFragment;
    
    
  4. Substitua as URLs de arquivos de imagem locais pelo conteúdo do mapa de recursos executando estas etapas:
    1. Verifique o HTML para detectar marcas img incorporadas.
    2. Se as marcas img estiverem presentes, recupere os objetos RandomAccessStreamReference do mapa de recursos.
    3. Substitua o conteúdo dos atributos src das marcas img pelas URLs dos objetos RandomAccessStreamReference.
    
    
    ...
    
    var images = document.getElementById("htmlOutput").getElementsByTagName("img");
    
    // Check first if there are any images (img tags) in the fragment, because
                // calling the getResourceMapAsync method can be resource intensive.
                if (images.length > 0) {
                    dataPackageView.getResourceMapAsync().done(function (resourceMap) {
    
                        // Check whether the resourceMap contains any items.
                        if (resourceMap.size > 0) {
                            for (var i = 0, len = images.length; i < len; i++) {
                                var imageElement = images[i];
                         
                                // Look up RandomAccessStreamReference value corresponding to this 
                                // image's SRC property.
                                var streamRef = resourceMap.lookup(imageElement.getAttribute("src"));
                                if (streamRef) {
                                    // Generate blob URL, and replace contents of the SRC property.
                                    replaceSrcURL(imageElement, streamRef);
                                }
                            }
                        }
                    });
    
                }
    ...
    
    function replaceSrcURL(imageElement, streamRef) {
        // Map the image element's src to a corresponding blob URL generated from the streamReference.
        streamRef.openReadAsync().done(function (imageStream) {
            var blobObject = 
                window.MSApp.createBlobFromRandomAccessStream(imageStream.contentType, imageStream);
            var blobUrl = window.URL.createObjectURL(blobObject, { oneTimeOnly: true });
            imageElement.src = blobUrl;
        }, function (e) {
             displayError("Error opening stream corresponding to the image element with SRC=\"" + 
                 imageElement.getAttribute("src") + "\". Error: " + e);
        });
    }
    
    

Exemplos completos

Esse exemplo mostra como copiar HTML com uma imagem inserida, na Área de Transferência.


function copyHTML() {
    // Create the DataPackage object.
    var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

    // Get the HTML content of an element.
    var htmlFragment = document.getElementById("htmlTextToCopy").innerHTML;

    // Prepare the HTML for Clipboard operations.
    var htmlFormat = 
        Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlFragment);
    if (htmlFormat !== "") {
        // Add the HTML to the DataPackage object
        dataPackage.setHtmlFormat(htmlFormat);

        // Populate the resourceMap with RandomAccessStreamReference objects 
        // corresponding to the local image file embedded in the HTML.
        var imagePath = document.getElementById("someEmbeddedImage").src;
        var imageUri = new Windows.Foundation.Uri(imagePath);
        var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(imageUri);
        dataPackage.resourceMap.insert(imagePath, streamRef);
    }

    try {
        // Copy the HTML content to Clipboard.
        Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);
        displayStatus("Text and HTML formats have been copied to Clipboard");
    } catch (e) {
        // Copying data to Clipboard can potentially fail if, for example another app is holding
        // the Clipboard open.
        displayError("Error copying content to Clipboard: " + e + ". Try again.");
    }
}

Esse exemplo mostra como obter HTML armazenado na Área de Transferência, juntamente com as imagens referenciadas no conteúdo HTML.


function pasteHTML() {

    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();

    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {

        // Get the HTML Format (CF_HTML) from DataPackageView.
        dataPackageView.getHtmlFormatAsync().done(function (htmlFormat) {

            // Extract the HTML fragment.
            var htmlFragment = 
                Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);

            // Add the fragment to the DOM.
            document.getElementById("htmlOutput").innerHTML = htmlFragment;

            // Replace local image file URLs, if any, with the contents of the resourceMap.
            var images = document.getElementById("htmlOutput").getElementsByTagName("img");

            // Check first if there are any images (img tags) in the fragment, because
            // calling the getResourceMapAsync method can be resource intensive.
            if (images.length > 0) {
                dataPackageView.getResourceMapAsync().done(function (resourceMap) {

                    // Check whether the resourceMap contains any items.
                    if (resourceMap.size > 0) {
                        for (var i = 0, len = images.length; i < len; i++) {
                            var imageElement = images[i];
                     
                            // Look up RandomAccessStreamReference value corresponding to this 
                            // image's SRC property.
                            var streamRef = resourceMap.lookup(imageElement.getAttribute("src"));
                            if (streamRef) {
                                // Generate blob URL, and replace contents of the SRC property.
                                replaceSrcURL(imageElement, streamRef);
                            }
                        }
                    }
                });

            }

        }, function (e) {
            displayError("Error retrieving HTML format from Clipboard: " + e);
        });
    } else {
        document.getElementById("scenario1HtmlOutput").innerText = 
        "HTML format is not available in clipboard";
    }
}

function replaceSrcURL(imageElement, streamRef) {
    // Map the image element's src to a corresponding blob URL generated from the streamReference.
    streamRef.openReadAsync().done(function (imageStream) {
        var blobObject = 
            window.MSApp.createBlobFromRandomAccessStream(imageStream.contentType, imageStream);
        var blobUrl = window.URL.createObjectURL(blobObject, { oneTimeOnly: true });
        imageElement.src = blobUrl;
    }, function (e) {
         displayError("Error opening stream corresponding to the image element with SRC=\"" + 
             imageElement.getAttribute("src") + "\". Error: " + e);
    });
}

Tópicos relacionados

Guia de início rápido: Noções básicas sobre área de transferência
Como copiar e colar arquivos
Como copiar e colar imagens
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:
© 2014 Microsoft