Guardar imágenes en AS3 con PNGEncoder y Base64

Guardar imágenes en AS3 con PNGEncoder y Base64

Etiquetas: PNGEncoder Base64 BitmapData Rectangle encodeByteArray

Imagen en reemplazo de flash
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 400x400, y el proceso no dura más de 2 seg.

Este es el código:

  1. ///////////////////////////////////////////////////////////////////////
  2. //CLASES
  3.  
  4. import flash.display.Graphics;
  5. import flash.display.Sprite;
  6. import flash.net.URLRequest;
  7. import flash.net.URLVariables;
  8. import flash.net.sendToURL;
  9. //Importo la clase PNGEncoder, que se va a encargar de codificar el Bitmap a PNG
  10. import com.adobe.images.PNGEncoder;
  11. //Importo la clase Base64, que va a pasar el ByteArray creado por PNGEncoder a un 
  12. //código BASE64 que posteriormente interpretará el PHP
  13. import com.dynamicflash.util.Base64;
  14.  
  15. ///////////////////////////////////////////////////////////////////////
  16. //VARIABLES
  17.  
  18. //Url del archivo PHP que va a codificar la imagen
  19. var url:String = "http://www.esedeerre.com/ejemplos/as3/guardarfoto/"
  20. var codificador:PNGEncoder;
  21.  
  22. ///////////////////////////////////////////////////////////////////////
  23. //FUNCIONES
  24.  
  25. function Empezar():void{
  26. 	Dibujo_mc.graphics.clear();
  27. 	Mensaje_mc.visible = false;
  28. 	Guardar_mc.addEventListener(MouseEvent.CLICK,Guardar);
  29. 	addEventListener(MouseEvent.MOUSE_DOWN,SiPintar);
  30. 	addEventListener(MouseEvent.MOUSE_UP,NoPintar);
  31. }
  32.  
  33. function SiPintar(e:MouseEvent){
  34. 	Dibujo_mc.graphics.moveTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);
  35. 	Dibujo_mc.addEventListener(Event.ENTER_FRAME,Pintar);
  36. }
  37.  
  38. function NoPintar(e:MouseEvent){
  39. 	Dibujo_mc.removeEventListener(Event.ENTER_FRAME,Pintar);
  40. }
  41.  
  42. function Pintar(e:Event){
  43. 	Dibujo_mc.graphics.lineStyle(3, ColorPicker_cp.selectedColor);
  44. 	Dibujo_mc.graphics.lineTo(Dibujo_mc.mouseX,Dibujo_mc.mouseY);
  45. }
  46.  
  47. function Guardar(e:MouseEvent):void{
  48. 	Mensaje_mc.visible = true;
  49. 	Guardar_mc.removeEventListener(MouseEvent.CLICK,Guardar);
  50. 	removeEventListener(MouseEvent.MOUSE_DOWN,SiPintar);
  51. 	removeEventListener(MouseEvent.MOUSE_UP,NoPintar);
  52.  
  53. 	Mensaje_mc.Texto_txt.text = "Codificando imagen para su envio...";
  54.  
  55. 	//Creo los contenedores para enviar datos y recibir respuesta
  56. 	var enviar:URLRequest = new URLRequest(url + "guardar.php");
  57. 	var recibir:URLLoader = new URLLoader();
  58.  
  59. 	//Creo el Bitmap que voy a convertir
  60. 	var bmd:BitmapData = new BitmapData(400,400);
  61.     bmd.draw(Dibujo_mc);
  62. 	var area:Rectangle = new Rectangle(0, 0, bmd.width, bmd.height);
  63.  
  64.  
  65. 	//Creo la variable que va a ir dentro de enviar, con los campos que tiene que recibir el PHP.
  66. 	var variables:URLVariables = new URLVariables();
  67.  
  68. 	//Creo el campo imgen, pasando primero el bitmap a un bytearray, y después codificandolo a Base64
  69. 	variables.imagen = Base64.encodeByteArray(PNGEncoder.encode(bmd));
  70.  
  71. 	//Indico el método por el que se va a enviar la información.
  72. 	enviar.method = URLRequestMethod.POST;
  73. 	//Indico que voy a enviar variables dentro de la petición
  74. 	enviar.data = variables;
  75.  
  76. 	//Añado listeners a recibir, para un posible error y una respuesta.
  77. 	recibir.addEventListener(Event.COMPLETE,Respuesta);
  78. 	recibir.addEventListener(IOErrorEvent.IO_ERROR,HayError);
  79.  
  80. 	//Hago la petición al PHP
  81. 	recibir.load(enviar);
  82. 	Mensaje_mc.Texto_txt.text = "Esperando conversión del archivo...";
  83. 	//Funcion que se ejecuta al recibir una respuesta del PHP
  84. 	function Respuesta(event:Event){
  85. 			trace(event.target.data);
  86. 			Mensaje_mc.Texto_txt.text = (" Tu imagen se ha guardado en:\n\n" + url +  "imagenes/" + event.target.data);
  87. 	}
  88.  
  89. 	//Función que se ejectuta cuando no se puede cargar el PHP
  90. 	function HayError(event:IOErrorEvent):void {
  91. 			trace("Error al cargar la url");
  92. 	}
  93. }
  94.  
  95. ///////////////////////////////////////////////////////////////////////
  96. //EMPEZAMOS
  97.  
  98. Empezar();
  99.  
  100. stop();

Descargar archivos

Comentarios
    • Autor
    • Ignaciojgp
    y cual es el codigo php para generar la imagen
    • Autor
    • esedeerre
    Buenas, puedes descargarlo de aquí:
    http://www.esedeerre.com/descargas/guardar.rar
    • Autor
    • MATAMBA
    Hola.Estoy buscando deseperadamente esta posibilidad. En mi caso quiero hacerlo de otra forma: quiero que dentro del swf se puedan arrastrar unos simbolos de unos reflectores de teatro, para elaborar un plano. Una vez arastrados, el resultado tendrá que guardarse en jpg. Es mucho pedir si te pediría que me enviaras por mail o bien que publiques aquí en un zip el fla y el php para que yo lo utilice como ejemplo? No soy especialista y no me entero por completo. Y encima, me urge mucho. Te paso unas entradas a mi sala como agradecimiento. Je jE je. Gracias. Matamba. sala@santart.com
    • Autor
    • Andros
    Wow! No tienes ni idea del favor que me acabas de hacer. Mil gracias tío. Te debo unas birras. ;)
    • Autor
    • esedeerre
    Ya tengo entradas para el teatro y cervezas. A ver si es verdad que llegan!!!! :p
    • Autor
    • Amparo
    Hola! Disculpar las molestias. Peri si me pudieseis pasar ese archivo a mi tambien, me quitariais muchos dolores de cabeza. Os dejo mi correo:bercedo_amparo@hotmail.com Mil gracias
    • Autor
    • esedeerre

    Hola Amparo, el php sigue estando aquí:

    http://www.esedeerre.com/descargas/guardar.rar

    • Autor
    • Pablo
    Si en lugar de guardarlos en el servidor, se podría guardar en el pc. Osea como si fuese una descarga. Gracias
    • Autor
    • martin
    Hola, cuando quiero abrir el archivo fla me aparece un error que dice: formato de archivo inesperado. Como se soluciona?
    • Autor
    • leandro
    Muchisimas gracias Hace rato que venia buscando algo asi Sos un capo Saludos :)
    • Autor
    • Diego Rotondo
    Buenas! por lo visto esto es lo que muchos estabamos buscando hace tiempo! pero por lo visto me hacen falta un par de archivos.
    import com.adobe.images.PNGEncoder;
    import com.dynamicflash.util.Base64;
    var codificador:PNGEncoder;
    variables.imagen = Base64.encodeByteArray(PNGEncoder.encode(bmd));
    
    Estaran para descargar por algun lado? Gracias!
    • Autor
    • Cesar
    • Autor
    • esedeerre

    @Pablo

    Eso lo puedes hacer en FP10, con la nueva función save() de FileReference

    @martin

    Eso es porque estás abriendo el archivo en una versión anterior de Flash a la CS3

    @Cesar

    Gracias por la info, lo pongo en "bonito"

    • Autor
    • danielon
    hola mui buen aporte dev erdad gracias
    • Autor
    • Raúl
    esta entrada es un poco vieja pero? gracias!!
    • Autor
    • Serge
    esedeerre, sé que no tienes porque hacerlo, pero si me mandaras por email (soyserge@gmail.com) todo el asunto (el .fla, las clases, etc... el php le tengo) te estaría muy agradecido, me quedé un poco atrás con el AS2 y el AS3 me queda muy grande aún y estoy más perdido que un gato en un garaje. Un abrazo.
    • Autor
    • David
    Hola. Espero que esten bien. Quisiera saber si uds me pueden colaborar con el ejemplo de código en .php para subirlo en mi sito y probar. Gracias de antemano.
    • Autor
    • Marlon
    Hola, oye una pregunta, si qusiera que se guardara como JPG envez de PNG como puedo hacerle? el codigo funciona genial, muchas gracias, solo quisiera guardarlo como JPG
    • Autor
    • Victor
    Hola, tendras todabia el ejemplo donde puedes arrastrar los reflectores y el resultado se guarde como imagen en el servidor? me lo podrías pasar tambien? mi correo es bbproyectate@gmail.com espero me puedas ayudar. gracias!
    • Autor
    • Marta
    Hola, alguien tiene la versión completa para descargar? con los .fla, .as , .php. etc.
    • Autor
    • avelino
    ola, disculpen pero no me funciona me sale los siguientes errores: 1172: No se encontró la definición com.adobe.images:PNGEncoder. 1172: No se encontró la definición com.dynamicflash.util:Base64. 1172: No se encontró la definición com.adobe.images:PNGEncoder. 1172: No se encontró la definición com.dynamicflash.util:Base64. 1046: No se encontró el tipo o no es una constante en tiempo de compilación: PNGEncoder. 1120: Acceso a una propiedad Base64 no definida. 1120: Acceso a una propiedad PNGEncoder no definida. y cuando le colgue a mi hostin tampoco funciona ayuda por favor, gracias
    • Autor
    • xEvi
    Hola, una pregunta, ¿Podría añadir mediante loader una imagen para entones pintar encima de ella y que se guardara todo junto? Estoy haciendo pruebas pero no logro que me funcione. Me pregunto en que MovieClip debo cargar la imagen ¿? Lo he probado en Dibujo_mc o FondoPintar_mc, pero no funciona como deseo. Ahhh he subido los archivos Base64.as y PNGEnconder.as para quien los necesite: http://rapidshare.com/files/418220345/com.rar saludos y gracias de antemano.
    • Autor
    • Ayelen
    Alguien tiene el flash de esto? la verdad que me doy muy poca mañana! Gracias!! si lo suben a algun lado o mi mail es chatarra@datafull.com Gracaissssss
    • Autor
    • Erick
    hola, me parece increíble que alguien le haya pasado exactamente lo mismo que ami, me pregunto si me puedes pasar los archivos que le pasaste a Andros, si es necesario te puedo pagar por ellos, realmente tengo tiempo tratando de encontrar algo así y ya lo tienes hecho. gracias de antemano
    • Autor
    • norman barrantes
    Hola esedeeree, te escribe norman barrantes. Trabajo en un proyecto que se complementa con flash, sin embargo tengo conocimiento limitados en ello. Ocupamos guardar el diseño que genere el cliente aqui: http://www.uniformesfutbolcr.com/uniformesfutbol-pruebas.swf Favor indicanos si puedes coloborarnos y el costo. Gracias
Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: