febrero 2008

Guardar imágenes en AS3 con PNGEncoder y Base64

Para guardar una imagen en AS2 habia que almacenar los colores de todos sus pixels, y mandar una cadena de texto con los valores a un fichero en el servidor para que creara la imagen. Esto era viable para imágenes relativamente pequeñas, ya que tanto Flash como el servidor tardaban mucho en procesar los datos. Con AS3 han surgido varias clases que aprovechan el potencial de la clase ByteArray y optimizan el flujo de datos Flash/servidor. En este ejemplo utilizo las clases PNGEncoder y Base64 para guardar un dibujo hecho en flash y guardarlo en el servidor como PNG. El tamaño de la imagen es de 400×400, y el proceso no dura más de 2 seg.

Este es el código:

///////////////////////////////////////////////////////////////////////
//CLASES

import flash.display.Graphics;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.sendToURL;
//Importo la clase PNGEncoder, que se va a encargar de codificar el Bitmap a PNG
import com.adobe.images.PNGEncoder;
//Importo la clase Base64, que va a pasar el ByteArray creado por PNGEncoder a un 
//código BASE64 que posteriormente interpretará el PHP
import com.dynamicflash.util.Base64;

///////////////////////////////////////////////////////////////////////
//VARIABLES

//Url del archivo PHP que va a codificar la imagen
var url:String = "http://www.esedeerre.com/ejemplos/as3/guardarfoto/"
var codificador:PNGEncoder;

///////////////////////////////////////////////////////////////////////
//FUNCIONES

function Empezar():void{
	Dibujo_mc.graphics.clear();
	Mensaje_mc.visible = false;
	Guardar_mc.addEventListener(MouseEvent.CLICK,Guardar);
	addEventListener(MouseEvent.MOUSE_DOWN,SiPintar);
	addEventListener(MouseEvent.MOUSE_UP,NoPintar);
}

function SiPintar(e:MouseEvent){
	Dibujo_mc.graphics.moveTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);
	Dibujo_mc.addEventListener(Event.ENTER_FRAME,Pintar);
}

function NoPintar(e:MouseEvent){
	Dibujo_mc.removeEventListener(Event.ENTER_FRAME,Pintar);
}

function Pintar(e:Event){
	Dibujo_mc.graphics.lineStyle(3, ColorPicker_cp.selectedColor);
	Dibujo_mc.graphics.lineTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);
}

function Guardar(e:MouseEvent):void{
	Mensaje_mc.visible = true;
	Guardar_mc.removeEventListener(MouseEvent.CLICK,Guardar);
	removeEventListener(MouseEvent.MOUSE_DOWN,SiPintar);
	removeEventListener(MouseEvent.MOUSE_UP,NoPintar);
	
	Mensaje_mc.Texto_txt.text = "Codificando imagen para su envio...";
	
	//Creo los contenedores para enviar datos y recibir respuesta
	var enviar:URLRequest = new URLRequest(url + "guardar.php");
	var recibir:URLLoader = new URLLoader();
	
	//Creo el Bitmap que voy a convertir
	var bmd:BitmapData = new BitmapData(400,400);
    bmd.draw(Dibujo_mc);
	var area:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);

	
	//Creo la variable que va a ir dentro de enviar, con los campos que tiene que recibir el PHP.
	var variables:URLVariables = new URLVariables();
	
	//Creo el campo imgen, pasando primero el bitmap a un bytearray, y después codificandolo a Base64
	variables.imagen = Base64.encodeByteArray(PNGEncoder.encode(bmd));
	
	//Indico el método por el que se va a enviar la información.
	enviar.method = URLRequestMethod.POST;
	//Indico que voy a enviar variables dentro de la petición
	enviar.data = variables;
	
	//Añado listeners a recibir, para un posible error y una respuesta.
	recibir.addEventListener(Event.COMPLETE,Respuesta);
	recibir.addEventListener(IOErrorEvent.IO_ERROR,HayError);
	
	//Hago la petición al PHP
	recibir.load(enviar);
	Mensaje_mc.Texto_txt.text = "Esperando conversión del archivo...";
	//Funcion que se ejecuta al recibir una respuesta del PHP
	function Respuesta(event:Event){
			trace(event.target.data);
			Mensaje_mc.Texto_txt.text = (" Tu imagen se ha guardado en:nn" + url +  "imagenes/" + event.target.data);
	}
	
	//Función que se ejectuta cuando no se puede cargar el PHP
	function HayError(event:IOErrorEvent):void {
			trace("Error al cargar la url");
	}
}

///////////////////////////////////////////////////////////////////////
//EMPEZAMOS

Empezar();

stop();

100

///////////////////////////////////////////////////////////////////////

//CLASES

import flash.display.Graphics;

import flash.display.Sprite;

import flash.net.URLRequest;

import flash.net.URLVariables;

import flash.net.sendToURL;

//Importo la clase PNGEncoder, que se va a encargar de codificar el Bitmap a PNG

import com.adobe.images.PNGEncoder;

//Importo la clase Base64, que va a pasar el ByteArray creado por PNGEncoder a un

//código BASE64 que posteriormente interpretará el PHP

import com.dynamicflash.util.Base64;

///////////////////////////////////////////////////////////////////////

//VARIABLES

//Url del archivo PHP que va a codificar la imagen

var url:String = "http://www.esedeerre.com/ejemplos/as3/guardarfoto/"

var codificador:PNGEncoder;

///////////////////////////////////////////////////////////////////////

//FUNCIONES

function Empezar():void{

Dibujo_mc.graphics.clear();

Mensaje_mc.visible = false;

Guardar_mc.addEventListener(MouseEvent.CLICK,Guardar);

addEventListener(MouseEvent.MOUSE_DOWN,SiPintar);

addEventListener(MouseEvent.MOUSE_UP,NoPintar);

}

function SiPintar(e:MouseEvent){

Dibujo_mc.graphics.moveTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);

Dibujo_mc.addEventListener(Event.ENTER_FRAME,Pintar);

}

function NoPintar(e:MouseEvent){

Dibujo_mc.removeEventListener(Event.ENTER_FRAME,Pintar);

}

function Pintar(e:Event){

Dibujo_mc.graphics.lineStyle(3, ColorPicker_cp.selectedColor);

Dibujo_mc.graphics.lineTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);

}

function Guardar(e:MouseEvent):void{

Mensaje_mc.visible = true;

Guardar_mc.removeEventListener(MouseEvent.CLICK,Guardar);

removeEventListener(MouseEvent.MOUSE_DOWN,SiPintar);

removeEventListener(MouseEvent.MOUSE_UP,NoPintar);

Mensaje_mc.Texto_txt.text = "Codificando imagen para su envio...";

//Creo los contenedores para enviar datos y recibir respuesta

var enviar:URLRequest = new URLRequest(url + "guardar.php");

var recibir:URLLoader = new URLLoader();

//Creo el Bitmap que voy a convertir

var bmd:BitmapData = new BitmapData(400,400);

bmd.draw(Dibujo_mc);

var area:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);

//Creo la variable que va a ir dentro de enviar, con los campos que tiene que recibir el PHP.

var variables:URLVariables = new URLVariables();

//Creo el campo imgen, pasando primero el bitmap a un bytearray, y después codificandolo a Base64

variables.imagen = Base64.encodeByteArray(PNGEncoder.encode(bmd));

//Indico el método por el que se va a enviar la información.

enviar.method = URLRequestMethod.POST;

//Indico que voy a enviar variables dentro de la petición

enviar.data = variables;

//Añado listeners a recibir, para un posible error y una respuesta.

recibir.addEventListener(Event.COMPLETE,Respuesta);

recibir.addEventListener(IOErrorEvent.IO_ERROR,HayError);

//Hago la petición al PHP

recibir.load(enviar);

Mensaje_mc.Texto_txt.text = "Esperando conversión del archivo...";

//Funcion que se ejecuta al recibir una respuesta del PHP

function Respuesta(event:Event){

trace(event.target.data);

Mensaje_mc.Texto_txt.text = (" Tu imagen se ha guardado en:nn" + url + "imagenes/" + event.target.data);

}

//Función que se ejectuta cuando no se puede cargar el PHP

function HayError(event:IOErrorEvent):void {

trace("Error al cargar la url");

}

///////////////////////////////////////////////////////////////////////

//EMPEZAMOS

Empezar();

stop();

EJEMPLOS DE WORDPRESS, HTML Y JAVASCRIPT

Actionscript3.0, Flash

Guardar imágenes en AS3 con PNGEncoder y Base64

Base64

Bitmapdata

encodeByteArray

PNGEncoder

Rectangle