Come salvare immagini in Flash CS3

Lunedì 31 Marzo, 2008

Con Flash CS3 l'uso delle Bitmap è così migliorato che viene subito voglia di creare un piccolo Paint. Abbiamo già visto come realizzare un piccolo Paint (vedi Creare un'applicazione Paint in Flash CS3 Painter: semplice applicazione per disegno in Flash CS3 Pro) in grado di supportare un vero e proprio "cancellino" - funzione erase, grazie ad un uso particolare di layer Shape e Bitmap. Diciamo subito che Flash (a differenza di Flex) non permette ne encoding (tipo JPG o PNG) ne salvataggio automatico di immagini Bitmap. Tuttavia si può aggirare l'ostacolo sfruttando uno scripting lato server e la capacità di Flash di inviare dati in POST.

LA TEORIA

L'artifizio che possiamo usare è il seguente: leggiamo i dati contenuti in una Bitmap pixel per pixel, li trasformiamo in valori esadecimali e li inviamo in POST ad una pagina PHP (in questo esempio sfruttiamo PHP e la GD Library per creare effettivamente l'immagine, ma altre soluzioni sono ugualmente efficaci).

Diciamo subito che l'unico neo di questa tecnica è l'estrema lentezza, almeno con Bitmap abbastanza grandi (io ho provato con una Bitmap 640 x 300)!

Inoltre, come vedrete nel codice Actionscript, non è possibile controllare il progress dell'invio, ma solo ottenere l'evento del completamento di tutto il lavoro; Actionscript + PHP.

LA PRATICA

Data una Bitmap l'algoritmo da usare può essere il seguente:

Actionscript:
  1. /**
  2. ** @prototype   : 0.0.1
  3. ** @author    : =undo=
  4. ** @email      : g.fazioli@undolog.com
  5. ** @web   : http://www.undolog.com
  6. **
  7. ** @params    :
  8. **
  9. ** __bitmap  : puntatore alla nostra bitmap
  10. ** __width    : larghezza in pixel
  11. ** __height  : altezza in pixel
  12. **
  13. */
  14.  
  15. // copia per la lettura - questo potrebbe essere evitato
  16. var sbmp:BitmapData = new BitmapData(__width, __height);
  17. sbmp.draw ( __bitmap );
  18. //
  19. var pixels:Array = new Array();
  20. for (var xx:uint = 0; xx <= __width; xx++) {
  21.     for (var yy:uint = 0; yy <= __height; yy++) {
  22.         pixels.push( sbmp.getPixel32(xx, yy).toString(16) );
  23.     }
  24. }
  25. //
  26. var urlreq:URLRequest     = new URLRequest( "http://miodominio.com/savebitmap.php" );
  27. var urlpar:URLVariables    = new URLVariables();
  28. var urlldr:URLLoader    = new URLLoader();
  29. //
  30. urlldr.addEventListener( Event.COMPLETE,
  31.     function (e:Event):void {
  32.         trace( ' Completato' );
  33.     }
  34. );
  35. //
  36. urlpar.pixels = pixels.toString();
  37. urlpar.height = __height;
  38. urlpar.width = __width;
  39. urlreq.data = urlpar;
  40. urlreq.method = URLRequestMethod.POST;
  41. urlldr.load( urlreq );

Come codice PHP possiamo usare:

PHP:
  1. /**
  2. ** @prototype   : 0.0.1
  3. ** @author    : =undo=
  4. ** @email      : g.fazioli@undolog.com
  5. ** @web   : http://www.undolog.com
  6. **
  7. ** @params    :
  8. **
  9. ** __bitmap  : puntatore alla nostra bitmap
  10. ** __width    : larghezza in pixel
  11. ** __height  : altezza in pixel
  12. **
  13. */
  14. // $pixels diventa un array con i valori dei singoli pixel
  15. $pixels = explode(",", $_POST['pixels']);
  16. $width = $_POST['width'];
  17. $height = $_POST['height'];
  18. // creo l'immagine - @evitando di emettere errori
  19. $image = @imagecreatetruecolor( $width ,$height );
  20. // Scrivo i pixel per tutta la lunghezza e altezza
  21. $index = 0;
  22. for($x=0; $x<=$width; $x++){
  23.     for($y=0; $y<=$height; $y++){
  24.         $r = hexdec("0x".substr( $pixels[$index] , 2 , 2 ));
  25.         $g = hexdec("0x".substr( $pixels[$index] , 4 , 2 ));
  26.         $b = hexdec("0x".substr( $pixels[$index] , 6 , 2 ));
  27.         $color = imagecolorallocate($image, $r, $g, $b);
  28.         imagesetpixel ($image,$x,$y,$color);
  29.         $index++;
  30.     }
  31. }
  32. // scrivo immagine (in JPG - ma potete usare un diverso formato) sul disco/server
  33. imagejpeg( $image, "immagine.jpg" );
  34. imagedestroy( $image ); // libero tutto

Torneremo prossimamente sull'argomento proponendo anche altre soluzioni... ;)

Riferimenti e webgrafia:

Lascia un commento

Puoi utilizzare i seguenti TAG XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>