Posts Tagged ‘ByteArray’

JPEG Encoder (AS3) + FluorineFx .NET Flash Remoting Gateway

Posted in ASP.NET, ActionScript 3.0, Flash, Remoting on fevereiro 18th, 2008 by Bruno Soares – 4 Comments
Vamos entender neste post como o flash cria um jpeg e o envia através do FluorineFx para o servidor para que o servidor possa trabalhar o dado binário e salvar como um arquivo .JPG.

Não vamos entrar em detalhes da instalação e nem da configuração básica de um site com FluorineFx, pois no próprio site do FluorineFx existe um ótimo tutorial para esta configuração inicial (FluorineFx Visual Studio 2005 Wizard).

Em primeiro lugar, que fique entendido que a responsabilidade de gerar a imagem é do Flash, e o servidor deve apenas receber os binários para gravar em disco. Para gerarmos o código da imagem (binário), vamos utilizar a classe JPEGEncoder.
Exemplo:

1
2
3
4
5
6
7
8
import flash.display.BitmapData;
import flash.utils.ByteArray;
import JPEGEncoder;

var bmpData : BitmapData = new BitmapData(width, height);
bmpData.draw(MEU_MOVIECLIP);
var objJPEGEncoder : JPEGEncoder = new JPEGEncoder(QUALIDADE);
var dadosEncode : ByteArray = objJPEGEncoder.encode(bmpData);

Muito simples não? O método draw da classe BitmapData obtém a imagem atual do clip, criamos uma instância da JPEGEncoder já passando a qualidade (0 à 100) e por fim “encodamos” o BitmapData utilizando o método encode da nossa instância da JPEGEncoder, ele nos retorna um Array de Bytes (flash.utils.ByteArray).

Agora ficou simples, temos em mãos o array de bytes, podemos enviar ele para o servidor para que o mesmo possa fazer sua parte, que nada mais é que salvar estes bytes em um arquivo. Utilizando o FluorineFx fica fácil, veja o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
using System;
using System.Web;
using System.Drawing;
using System.IO;
using FluorineFx;
using FluorineFx.AMF3;

namespace ServiceLibrary.Imagem
{
   [RemotingService("Comentário da classe")]
   public class JpegEncoder
   {
       public void Salvar(ByteArray byteArray)
       {
           // Transfere de ByteArray para MemoryStream
           uint length = byteArray.Length;
           byte[] bytes = new byte[length];
           byteArray.ReadBytes(bytes, 0, length);
           MemoryStream stream = new MemoryStream(bytes);

           // Cria a imagem
           Image image = Bitmap.FromStream(stream);

           // Salva a imagem
           image.Save(
           HttpContext.Current.Server.MapPath("_upload/JpegEncoder.jpg"));

           // Libera o espaço na memória
           stream.Dispose();
           image.Dispose();
       }
   }
}

Este código deve ser inserido dentro da ServiceLibrary que você criou para a sua Solution.

Repare na classe ByteArray, é uma implementação do ByteArray do Flash no servidor, provida pelo FluorineFx.AMF3.

Sua Solution Explorer deve se parecer um pouco com esta:

Deixei selecionadas as referências para System.Drawing e Web propositalmente, pois são referências necessárias para o funcionamento da nossa classe.

Agora vamos a parte do envio do ByteArray criado no Flash apartir da JPEGEncoder para a nossa classe la no FluorineFx, a ServiceLibrary.Imagem.JpegEncoder. No exemplo anexo ao post (mais ao fim do post tem um link para download) utilizei uma classe que criei a pouco tempo para trabalhar com AMF no geral (br.com.bsoares.net.Amf), ela vai tomar muito espaço no post, portanto vou demonstrar somente a utilização dela:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
* Função de callback para JpegEncoder.Salvar
* @param resposta
*/

private function baixarSusseco (resposta : Object) : void {
   UtilNet.navegar(Config.URL_UPLOAD + "JpegEncoder.jpg", "_blank");
}

/**
* Função de callback para JpegEncoder.Salvar
* @param resposta
*/

private function baixarErro (resposta : Object) : void {
   trace("--< ERRO >----------------------");
   for each (var o : Object in resposta) {
       trace(o);
   }
   trace("--------------------------------");
}

/**
* Retorna o ByteArray gerado pela JPEGEncoder
* @return Byte Array
*/

private function obterByteArray () : ByteArray {
   var bmpData : BitmapData = new BitmapData(_flvPlayer.msk.width, _flvPlayer.msk.height);
   bmpData.draw(_alvoCaptura);
   var objJPEGEncoder : JPEGEncoder = new JPEGEncoder(_qualidade.value);
   var dadosEncode : ByteArray = objJPEGEncoder.encode(bmpData);
   return dadosEncode;
}

/**
* Chama o método Salvar da Classe JpegEncoder utilizando o FluorineFx.
* Neste exemplo, criei uma classe chamada AMF para tratar a comunicação
* com o FluorineFx (serve também para AMFPHP)
* @param Evento
*/

private function onBaixarClick (e : MouseEvent) : void {
   var objAmf : Amf = new Amf();
   objAmf.URL = Config.URL_AMF_GATEWAY;
   objAmf.onSusseco = baixarSusseco;
   objAmf.onErro = baixarErro;
   objAmf.executar("ServiceLibrary.Imagem.JpegEncoder.Salvar", obterByteArray());
}

Pelo comentário de cada método já podemos perceber como funciona o envio do Array de bytes.

Dicas:
• Neste projeto utilizei o FlashDevelop, que na minha opinião é um ótimo editor de Action Script.
• Observe a estrutura de classes, para quem ainda não entende muito de POO (Programação Orientada a Objetos) este post é um bom exemplo de organização de Packages e Nomenclatura de Variáveis, Classes e Métodos. Vou tentar em um próximo post escrever mais sobre Programação Orientada a Objetos (POO) de uma forma mais avançada abrangendo Encapsulamento, Herança e Polimorfismo, o qual não é o objetivo deste post).

Observações de Configuração:
Observe na imagem abaixo o projeto aberto no FlashDevelop:

Clique com o botão direito do mouse sobre JPEG_Encoder (AS3), vá em Properties, repare que na área Project Classpaths deve ser adicionado os dois diretórios (_Biblioteca_ e Classes).

Conclusão:
Vimos como é possível o Flash gerar uma imagem (JPEG) utilizando a classe JPEGEncoder, como enviamos os binários do JPEG para o ASP.NET utilizando o FluorineFx e como o FluorineFx salva os binários em disco.

Por hoje é isso pessoal.
Vocês podem fazer o download do projeto aqui.

Links relacionados:
• FluorineFx: http://www.fluorinefx.com/
• FluorineFx download: http://www.fluorinefx.com/download.html
• FluorineFx Visual Studio: http://www.fluorinefx.com/docs/fluorine/vswizardnet20.html
• Live JPEG Encoder: http://www.bytearray.org/?p=26
• PNG Encoder in AS3: http://www.kaourantin.net/2005/10/png-encoder-in-as3.html
• FlashDevelop: http://osflash.org/flashdevelop