Como compartilhar uma imagem (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)

Applies to Windows and Windows Phone

Talvez o tipo de conteúdo mais comum compartilhado pelos usuários seja imagens e fotos. Aqui, mostraremos como compartilhar uma única imagem com o seu aplicativo.

O código desta seção concentra-se no uso de setBitmappara compartilhamento de uma imagem de bitmap. Frequentemente, usuários compartilham imagens que são representadas por arquivos. Como resultado, recomendamos que o seu aplicativo também seja compatível com StorageItems, que pode ser uma coleção de quaisquer tipos de arquivos. Descrevemos como dar suporte a StorageItems em Como compartilhar arquivos.

O que você precisa saber

Tecnologias

Pré-requisitos

Instruções

Etapa 1: Crie ua função do manipulador de botao para permitir que o usuário escolha um arquivo de imagem

O seguinte código do manipulador de botao permite que o usuário selecione um arquivo de imagem. Este arquivo é usado nas etapas remanescentes desse guia de início rápido.

  • Applies to Windows Phone

Observação  

O código a seguir utiliza pickSingleFileAsync. No Windows Phone 8.1, pickSingleFileAndContinue deve ser usado no lugar.


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

Etapa 2: Configurar seu aplicativo como uma origem de compartilhamento

O objeto DataTransferManager é o ponto de partida de qualquer operação de compartilhamento. Adicione um manipulador de eventos DataRequested para disparar quando o usuário desejar chamar a opção Compartilhar. Em um aplicativo da Windows Store, isso ocorre automaticamente quando o usuário chamar o botão Compartilhar. Se estiver desenvolvendo para Windows Phone, não haverá botão Compartilhar interno, portanto você precisará adicionar um controle para o usuário tocar e disparar o manipulador.


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


As demais etapas destinam-se à implementação da função shareImageHandler.

Etapa 3: Obter um objeto DataRequest

Quando ocorre um evento datarequested, o seu aplicativo recebe um objeto DataRequest. Este objeto contém um DataPackage que você pode usar para fornecer o conteúdo que o usuário quer compartilhar.


var request = e.request;


Etapa 4: Definir as propriedades de título e descrição


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

Etapa 5: Adicionar uma miniatura ao DataPackage

Recomendamos que você sempre adicione uma imagem em miniatura ao compartilhar uma imagem.


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

Confira o tópico de referência de Thumbnail para saber mais sobre nossos tamanhos de arquivo recomendados para imagens em miniatura.

Etapa 6: Adicionar a imagem como um bitmap ao DataPackage

Para compartilhar uma imagem, use o método setBitmap. Esse método espera que a imagem seja do tipo RandomAccessStreamReference. Para compartilhar várias imagens, compartilhe-as como storageItems. Descrevemos como dar suporte a storageItems em Como compartilhar arquivos. Isso ajuda a assegurar que o usuário poderá escolher dentre o maior número possível de aplicativos quando quiser compartilhar a imagem.


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


Comentários

Se o aplicativo precisa usar uma operação assíncrona para preparar a imagem ou a miniatura, será necessário usar o padrão de adiamento. Mostramos como fazer isso em Como fazer chamadas assíncronas em seu manipulador datarequested .

Se o aplicativo demorar mais de 200 milissegundos para preparar a imagem, você precisará usar uma função de delegação para compartilhá-los. Mostramos como fazer isso em Como suportar operações Pull.

Exemplo completo

Aqui está um exemplo que define uma imagem do usuário para compartilhamento. Para obter um exemplo mais completo, consulte a nossa amostra da galeria 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());
    }
};

Tópicos relacionados

Exemplo de aplicativo de compartilhamento de origem de conteúdo
Compartilhando e trocando dados
Como compartilhar arquivos
Como compartilhar HTML
Como compartilhar um link
Como compartilhar texto
Início rápido: compartilhando conteúdo
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Mostrar:
© 2014 Microsoft