Técnico

Como salvar “ SnapShots” de componentes do Flex na máquina do usuário.

Recentemente trabalhei em dois aplicativos em Flex que permitiam salvar “Snapshots” de componentes do Flex na máquina do usuário. E gostaria de compartilhar com todos algumas lições aprendidas apresentando este simples tutorial.

Motivação

Antigamente quando era necessário se capturar uma imagem de um componente interno a partir de uma aplicação Flex e salvar esta imagem no disco local do usuário era uma tarefa um tanto quanto complicada.

Para gerar a imagem era necessário que todos o pixels da imagem fossem enviados para o servidor para serem processados, a partir desses pixels recebidos uma imagem era gerada no servidor, e só então esta imagem poderia então ser baixada a partir do servidor e salva na máquina do usuário. O processo não era muito eficiente com relação a rapidez e não era tão simples de ser implementado.

Com o passar do tempo, após a criação do ActionScript 3,  juntamente com o FlashPlayer 10, que implementou um novo recurso, o ‘FileReference.save()’, que permite que o player do Flash possa salvar arquivos na maquina do usuário. Quando este método é chamado, o system dialog padrão do S.O. utilizado é então aberto para escolher o diretório e o nome do arquivo a serem salvos.

Isto permitiu que não fosse mais necessário que estes dados sejam enviados de volta para o servidor,  a imagem poderia a partir de então ser gerada localmente na própria maquina do usuário, diretamente do Flash Player para o HD do usuário, tornando então este processo muito mais eficiente e também mais fácil de ser implementado.

Outro ponto que ajuda e muito para obtermos uma solução eficiente, é a implementação da biblioteca as3CoreLibrary, que implementa o JPEGEncoder e o PNGEncoder, que possuem codificadores com desempenho muitas vezes melhor do que os Encoders nativos do Flex para codificar a imagem para o formato JPEG ou PNG respectivamente, além de muitos outros recursos disponíveis. O as3CoreLibrary pode ser baixado em: https://github.com/mikechambers/as3corelib .

Implementação

Então vamos ao que interessa. Esta pequena função abaixo é que faz toda a mágica, é ela que gera a imagem a partir do componente AgonNewsSnapShot e o salva na maquina do usuário:


protected function saveSnapshot_clickHandler(event:MouseEvent):void
{
var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(birthDaySnapshot);
var imgByteData:ByteArray = PNGEncoder.encode(imageBitmapData);
var file:FileReference = new FileReference();
file.save(imgByteData,"nomeDoArquivo.png");
}

O componente AgonNewsSnapShot nada mais é do que um Group no qual todos os seus filhos (Labels, Background, Images, etc.) serão desenhados na imagem a ser salva, veja abaixo o exemplo de uma instância deste componente:

Vamos dividir em partes:

Primeiro é capturada a imagem Bitmap do componente AgonNewsSnapShot, que no nosso caso é o componente que será salvo como imagem no computador do usuário:


var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(agonNewsSnapshot);

Usamos o PNGEncoder para converter a imagem e retornar o ByteArray da mesma:


var imgByteData:ByteArray = PNGEncoder.encode(imageBitmapData);

É chamado o system dialog padrão do S.O, para salvar o ByteArray na maquina do usuário no diretório selecionado por ele.


var file:FileReference = new FileReference();
file.save(imgByteData,"nomeDoArquivo.png");

Pronto! Seu componente acaba de ser desenhado numa imagem e salvo no computador do usuário.

Bom galera esse é meu primeiro post, espero que tenham gostado, e virão mais por aí.

Abraços.

Referencias:

http://www.switchonthecode.com/tutorials/flex-tutorial-an-asynchronous-jpeg-encoder

http://ask.amoeba.co.in/save-images-from-flash-actionsctipt-3-filereference-save-jpgencoder/


Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Compartilhe isso: