Guardar imágenes con BitmapData y PHP

Guardar imágenes con BitmapData y PHP

Etiquetas: BitmapData draw getPixel getURL sendAndLoad

Imagen en reemplazo de flash
Actualización: 07-12-2010

Este método solo es recomendable si estamos obligados a utilizar Actionscript 2 y Flash Player 8. Si podemos utilizar Flash Player 10, podemos hacer la conversión directamente en local sin pasar por servidor. Hay un ejemplo, aquí: Guardar una imagen con la función save() de FileReference

Si podemos utilizar FP9 pero no FP10, podemos hacer la conversión de la imagen a JPG en local y luego subir el archivo (pongo un ejemplo en breve)

La idea es sencilla: Hacer un dibujo en Flash, y guardarlo como jpg ( o guardar el contenido de un clip, o hacer un pantallazo). El proceso es el siguiente:

  • "Calcar" el objeto que queremos guardar en un objeto BitmapData
  • Recorrer ese objeto para almacenar el color de cada pixel en un String.
  • Mandar ese String a un PHP para que nos "pinte" la imagen y la guarde.

El código Actionscript es este:
  1.  
  2. import flash.display.BitmapData;
  3.  
  4. urlo = "";
  5.  
  6. //////////////////////////////////////////////////////////////////////////////////////////
  7.  
  8. //Esta es la función que se encarga de crear el objeto, "guardar los pixels" y mandarlos
  9.  
  10. function Capturar(mc:MovieClip) {
  11. 	//Muestro mi capa de progreso
  12. 	Progreso_mc._visible = true;
  13. 	Progreso_mc.Cerrar_bt._visible = false;
  14. 	//Creo el objeto bit map, del ancho y el alto del objeto que quiero guardar y dibujo este dentro
  15. 	mcBitmap = new BitmapData(mc._width, mc._height, true, 0xFFFFFF);
  16. 	mcBitmap.draw(mc);
  17. 	//Actualizo el estado de progreso
  18. 	Progreso_mc.Texto_txt.text = "Guardando imagen...";
  19. 	//Guardo en una matriz el valor de todos los pixels
  20. 	var cadena = new String();
  21. 	for (var i = 1; i<=mc._height; i++) {
  22. 		for (var j = 1; j<=mc._width; j++) {
  23. 			cadena += ","+mcBitmap.getPixel(j, i).toString(16);
  24. 		}
  25. 	}
  26. 	//Creo las variables para enviar y recibir del PHP
  27. 	enviarImagen = new LoadVars();
  28. 	respuesta = new LoadVars();
  29. 	//Al recibir los datos del PHP generador
  30. 	respuesta.onLoad = function(exito) {
  31. 		//Si todo ha ido bien
  32. 		if (exito) {
  33. 			//Actualizo el progreso y cargo en una nueva ventana la imagen generada
  34. 			Progreso_mc.Texto_txt.text = "Imagen recibida";
  35. 			Progreso_mc.Cerrar_bt._visible = true;
  36. 			getURL(urlo+unescape(this.archivo), "_blank");
  37. 			//Si algo ha fallado
  38. 		} else {
  39. 			//Mensaje de error
  40. 			Progreso_mc.Texto_txt.text = "Error al generar la imagen.";
  41. 			Progreso_mc.Cerrar_bt._visible = true;
  42. 		}
  43. 	};
  44. 	//Almaceno en la variable a enviar los valores de los pixels, y el ancho y alto de la imagen
  45. 	enviarImagen.imagen = cadena;
  46. 	enviarImagen.ancho = mc._width;
  47. 	enviarImagen.alto = mc._height;
  48. 	//Actualizo el progreso
  49. 	Progreso_mc.Texto_txt.text = "Generando jpg...";
  50. 	//Envio los datos de la imagen
  51. 	enviarImagen.sendAndLoad(urlo+"salvar.php",respuesta,"post");
  52. }
  53.  
  54. //////////////////////////////////////////////////////////////////////////////////////////
  55. //Código del botón guardar
  56.  
  57. Guardar_bt.onRelease = function() {
  58.  
  59. 	//Al pulsar guardar, invoco a la funcion Capturar pasando como parametro el clip que quiero "guardar"
  60.  
  61. 	Capturar(Escena_mc);
  62.  
  63. };
  64.  
  65. //////////////////////////////////////////////////////////////////////////////////////////
  66. //Este es el código para hacer la "Pizarra". Muy sencilla, pero para el ejemplo vale.
  67.  
  68. Escena_mc.onMouseDown = function() {
  69. 	Escena_mc.Tiza_mc.lineStyle(3,"0x000000");
  70. 	Escena_mc.Tiza_mc.moveTo(_xmouse,_ymouse);
  71. 	Pintar = true;
  72. };
  73.  
  74. Escena_mc.onMouseUp = function() {
  75. 	Pintar = false;
  76. };
  77.  
  78.  
  79. Escena_mc.onEnterFrame = function() {
  80. 	if (Pintar) {
  81. 		Escena_mc.Tiza_mc.lineTo(_xmouse,_ymouse);
  82. 	}
  83. };
  84.  
  85. //////////////////////////////////////////////////////////////////////////////////////////
  86. //////////////////////////////////////////////////////////////////////////////////////////
  87. Progreso_mc._visible = false;
  88. stop();
  89.  

Y el php (sacado de google):

  1.  
  2. <?php 
  3. 	//recibo las variables 
  4. 	$ancho=$_POST["ancho"]; 
  5. 	$alto=$_POST["alto"]; 
  6. 	$pixels=explode(",",$_POST["imagen"]); 
  7. 	//$bg=$_POST["bg"]; 
  8.  
  9. 	//creamos la imagen 
  10. 	$img = imagecreatetruecolor($ancho, $alto); 
  11. 	//creamos el color de fondo 
  12. 	$bghex = 0xffffff; 
  13. 	while(strlen($bghex) < 6){ 
  14. 	   $bghex = "0" . $bghex; 
  15. 	} 
  16. 	$r = hexdec(substr($bghex, 0, 2)); 
  17. 	$g = hexdec(substr($bghex, 2, 2)); 
  18. 	$b = hexdec(substr($bghex, 4, 2)); 
  19. 	$color = imagecolorallocate($img, $r, $g, $b); 
  20. 	//rellenamos la imagen con el color de fondo 
  21. 	imagefill($img, 0, 0, $color); 
  22.  
  23. 	//pintamos cada uno de los pixeles: 
  24. 	$x=0; 
  25. 	$y=0; 
  26. 	foreach($pixels as $key => $value) { 
  27. 	   if($value!="") { 
  28. 		  $hex = $value; 
  29. 		  while(strlen($hex) < 6){ 
  30. 			 $hex = "0" . $hex; 
  31. 		  } 
  32. 		  $r = hexdec(substr($hex, 0, 2)); 
  33. 		  $g = hexdec(substr($hex, 2, 2)); 
  34. 		  $b = hexdec(substr($hex, 4, 2)); 
  35. 		  $test = imagecolorallocate($img, $r, $g, $b); 
  36. 		  imagesetpixel($img, $x, $y, $test); 
  37. 	   } 
  38. 	   $x++; 
  39. 	   if($x>=$ancho) { 
  40. 		  $x=0; 
  41. 		  $y++; 
  42. 	   } 
  43. 	} 
  44. 	//asignamos un numero unico para el nombre del archivo 
  45. 	$string=md5(implode("",$pixels)); 
  46. 	//el nombre del archivo a guardar 
  47. 	$filename="images/$string.jpg"; 
  48. 	//si el archivo no existe 
  49. 	if(!file_exists($filename)) { 
  50. 	   //lo guardamos 
  51. 	   imagepng($img, "$filename"); 
  52. 	} 
  53. 	//devolvemos a flash la ruta del archivo 
  54. 	echo "archivo=$filename&"; 
  55. ?>
  56.  
Comentarios
    • Autor
    • Matamba
    Hola. Tienes el fla y el php ? Gracias.
    • Autor
    • Francisco
    Hola, muy bien el tutorial, pero es que hace falta el archivo salvar.php, por favor si lo tienes subelo o enviamelo al correo, gracias de antemano
    • Autor
    • José
    Yo pido lo mismo, me hace falta el archivo salvar.php, por favor subelo si lo tienes. Grazias
    • Autor
    • José
    Hola, creo que el codigo que aquí se postea ha sido sacado de aquí: http://www.forosdelweb.com/f16/problemas-sendandload-614461/ Como vemos ahí esta el fichero "salvar.php" pero yo lo he probado y lo no terminó de hacer funcionar, me da error en la url porque me devuelve "underfined". Si alguien que lo pruebe y le funcione ayuda...
    • Autor
    • esedeerre

    Buenas, lo primero decir que todos los códigos que están aquí posteados son originales. Es decir, que el código que ha posteado José en forosdelweb, se ha sacado de aquí, y no viceversa.

    El salvar.php lo podéis bajar de aquí:

    http://www.esedeerre.com/ejemplos/salvarfoto/salvar.rar

    • Autor
    • José
    Hola de nuevo! Bueno quiero aclarar que yo no sabía que fuente es la original, supuse que está fue sacada del foro que mencioné antes porque el que ha hecho este post dice "Y el código (el Actionscript, el PHP lo saqué de Google) es este:". Grazias por el salvar.php pero no funciona, me bajo el rar y me da error. Si lo podeis solucionar de alguna forma, pasandolo a .zip o algo os lo agredecería porque lo necesito por favor, grazias de antemano. Saludos
    • Autor
    • José
    Grazias ya me lo he podido bajar, no se que pasaba antes. Perdonad el doble post fue sin querer.
    • Autor
    • Alberto
    Hola esedeerre! El .fla me lo podría bajar de algun sitio? Gracias de antemano!
    • Autor
    • J
    como capturas la imagen en php si quieres obtenerla de una webcam com flash ? help !!
    • Autor
    • pesadillo
    Un codigo similar lo teneis en : http://www.forosdelweb.com/f16/como-generar-jpg-desde-flash-parecido-599741/ Para grabar la imagen de la webcam el codigo lo podeis descargar de: http://toro.ymipollo.com/147171.webcam-en-ymipollo-version-4.html
    • Autor
    • rafa
    Podrias pasar el .fla para entender mejor el codigo?
    • Autor
    • erick
    Esta bueno el codigo pero porfa si puedes colocar el .fla para ver mejor la Escena_mc; Tiza_mc; etc.
    • Autor
    • luis aparicio
    Buenas, la verdad intente realizar tu codigo pero me da error con php y la clase de imagen la verdad noc dond importarla o q se hac.. jaja bueno espero m puedan ayudar..
    • Autor
    • josue
    ok a mi me guarda bien pero el detalle es que me sale la imagen con fondo negro, en vez de dibujar lo que hago es cargar un mc como contenedor pero me pinta, donde podria ser el cambio saludos cordiales
    • Autor
    • juan pablo
    hola que tal, no tendrias el fla para descargarlo gracias
    • Autor
    • santiago
    hola, me encanta tu tutorial y tengo muchas ganas de hacerlo, pero no tengo mucha idea de flash asi que te quieria padir si puedes subir el .fla para ver los codigos y cambiar algunas cosas, gracias! mi msn es: san.tire.kapo@hotmail.com
    • Autor
    • giancarlo
    No se si nadie se fijo salen las caputa de lado eso por que es y como solucionarlo? a mi se me ven las caputas de lado http://www.esedeerre.com/ejemplos/salvarfoto/images/6542409665229331eb2fa97ec2582ba6.jpg alguien sabe el porque?
    • Autor
    • edinson
    me podrias pasar el .fla por favor
    • Autor
    • juan
    Me podrías pasar el .fla, me harías un gran favor.
    • Autor
    • Juan Cruz
    Hola! para los que les salio con defectos en la imagen. La imagen debe estar en 0,0. es decir no debe contener pixeles en posiciones negativas. El movie clip debe ser totalmente positivo. Sino como se se refleja. Tambien cambie los parametros de los for en de flash. recorreo desde 0 hasta whidt-1 y desde 0 hasta heigth-1 Saludos!
    • Autor
    • Gustavo
    A mi me salia deformada la imagen y solucione tranformando en entero los datos que recibe el php $ancho = (int) $_POST["ancho"]; $alto = (int) $_POST["alto"]; Otro tema, el string que envia el flash es enorme!!! y me da errores en algunos servidores, tenes alguna forma de comprimir la cabecera? con gZip???? descompimirlo con el php luego que recibe es facil... porfavorrrrr!!!!!
    • Autor
    • Karo
    Hola. hice el tuto y me funciona perfecto en el local host, pero lo subo al servidor, cambio lo que a mi parecer debo, pero no me genera la imagen.. me da error.. me podrias ayudar por favor..:)
    • Autor
    • Bill
    Buen tuto la verdad que me ha servido, pero tengo igual el problema de la imagen deformada de lado, intente poner enteros los datos en el php como lo sugirio el amigo Gustavo pero no me funciono, me podrian ayudar por favor?
    • Autor
    • DIck
    Tengo el problema de que la imagen se va de lado, y tengo el contenido del clip a imprimir en posision x, y en 0 ya intente lo de gustavo y juan cruz, alguna sugerencia mas amigos?
    • Autor
    • Paco
    esedeerre, ya entrega el fla hermano que no ves que vox populi vox dei (la voz del pueblo es la voz de dios)aqui tienes mas solicitudes que felicitaciones, vamos obsequia si es posible todo el proto y te lloveran agradecimientos a lo bestia. Un abrazo.
    • Autor
    • Daniel
    Hola, Excelente ejemplo, se puede hacer esto agregando un texto dinámico? Saludos
Dejar un comentario
Tu nombre (obligatorio):

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

Web:

Comentario: