A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Sending image data from Flash to PHP. Help!

  1. #1
    Member
    Join Date
    Sep 2007
    Posts
    69

    Sending image data from Flash to PHP. Help!

    I want to allow the user of a flash movie to display on the browser (or to force download) an image within a Sprite, as a JPG image/file.

    I started from a pre-made class located on sephiroth.it:
    http://www.sephiroth.it/tutorials/fl.../print_screen/

    but as this code was made in AS2, I decided to create my own AS3 class based on this one, and the result I get on the browser is a one pixel column of 1x300 pixels (the sprite size is 300x300). For some reason, the data passed from Flash to PHP is not processed right.

    This is the code I made:

    JPGExporter class (JPGExporter.as):

    PHP Code:
    package {
        
        
    import flash.display.BitmapData;
        
    import flash.geom.Rectangle;
        
    import flash.geom.ColorTransform;
        
    import flash.geom.Matrix;
        
    import flash.utils.Timer;
        
    import flash.events.TimerEvent;
        
    import EventImgProcess;    // custom event class for events of image processing
        
    import flash.events.EventDispatcher;
        
    import flash.display.DisplayObject;
        
    import flash.net.URLVariables;
        
        public class 
    JPGExporter extends EventDispatcher {
            
            private var 
    timer:Timer = new Timer(5);
            public var 
    record:URLVariables// used to stored all the data to send
            
    private var _container:DisplayObject;
            private var 
    bmp:BitmapData;
            
            public function 
    JPGExporter(container:DisplayObjectx:Numbery:Numberw:Numberh:Number) {
                
    _container container as DisplayObject;
                            
                
    bmp = new BitmapData(whfalse);
                
    record = new URLVariables();
                
    record.width w;
                
    record.height h;
                
    record.col 0;
                
    record.row 0;
                
                var 
    matrix:Matrix = new Matrix();
                
    matrix.translate(-x, -y);
                
                
    bmp.draw(containermatrix, new ColorTransform(), null, new Rectangle(00wh));
                
                
    timer.addEventListener(TimerEvent.TIMERcopySource);
                
    timer.start();
            }
            
            private function 
    copySource(e:TimerEvent):void {
                var 
    pixel:Number;
                var 
    str_pixel:String;
                
    record["px" record.row] = new Array();
                
    // Get row specified by row property of record (URLVariables)
                
    for (var a:uint 0bmp.widtha++) {
                    
    pixel bmp.getPixel(arecord.row);
                    
    str_pixel pixel.toString(16);
                    if (
    pixel == 0xFFFFFFstr_pixel ""// don't send blank pixels
                    
    record["px" record.row].push(str_pixel);
                }
                
                
    record.row += 1;
                
                if (
    record.row >= bmp.height) {
                    
    timer.stop();
                                    
    // trigger the complete event and pass through it the processed data in order to send it
                    
    dispatchEvent(new EventImgProcess(EventImgProcess.IMAGE_COMPLETErecord));
                    
    bmp.dispose();
                }
            }
            
        }    
        

    Code in the FLA file (test.fla):

    PHP Code:
    imageProcess = new JPGExporter(mySprite00mySprite.widthmySprite.height);
        
    imageProcess.addEventListener(EventImgProcess.IMAGE_COMPLETEonImageComplete);

    function 
    onImageComplete(e:EventImgProcess):void {
        var 
    variables:URLVariables e.variables as URLVariables// I get the URLVariables instance containing all the data through my custom event
        
    var request:URLRequest = new URLRequest("http://localhost/.../pixels2JPG.php");
        
    request.method URLRequestMethod.POST;
        
    request.contentType "application/x-www-form-urlencoded";
        
    request.data variables;
        
    trace("Image processing complete");
        
    navigateToURL(request"_blank");    

    And the PHP (pixels2JPG.php):

    PHP Code:
    <?php

    error_reporting
    (0);
    /**
     * Get the width and height of the destination image
     * from the POST variables and convert them into
     * integer values
     */
    $w = (int)$_POST['width'];
    $h = (int)$_POST['height'];

    // create the image with desired width and height

    $img imagecreatetruecolor($w$h);

    // now fill the image with blank color
    // do you remember i wont pass the 0xFFFFFF pixels 
    // from flash?
    imagefill($img000xFFFFFF);

    $rows 0;
    $cols 0;

    // now process every POST variable which
    // contains a pixel color
    for($rows 0$rows $h$rows++){
        
    // convert the string into an array of n elements
        
    $c_row explode(","$_POST['px' $rows]);
        for(
    $cols 0$cols $w$cols++){
            
    // get the single pixel color value
            
    $value $c_row[$cols];
            
    // if value is not empty (empty values are the blank pixels)
            
    if($value != ""){
                
    // get the hexadecimal string (must be 6 chars length)
                // so add the missing chars if needed
                
    $hex $value;
                while(
    strlen($hex) < 6){
                    
    $hex "0" $hex;
                }
                
    // convert value from HEX to RGB
                
    $r hexdec(substr($hex02));
                
    $g hexdec(substr($hex22));
                
    $b hexdec(substr($hex42));
                
    // allocate the new color
                // N.B. teorically if a color was already allocated 
                // we dont need to allocate another time
                // but this is only an example
                
    $test imagecolorallocate($img$r$g$b);
                
    // and paste that color into the image
                // at the correct position
                
    imagesetpixel($img$cols$rows$test);
            }
        }
    }

    // print out the correct header to the browser
    header("Content-type:image/jpeg");
    // display the image
    imagejpeg($img""90);
    ?>
    What do you think is going wrong?
    Last edited by Jazztronik; 07-17-2009 at 11:17 AM.

  2. #2
    Member
    Join Date
    Sep 2007
    Posts
    69
    After doing some tests, I've checked that if I'm not wrong, all the data is stored correctly in Flash, but something happens on transmission, because PHP gets, for each array representing a row (px0, px1, ..., px299), only the first array representing the first column of the bitmap. That's why the browser shows a very thin vertical line (1px wide x 300px high).

    Please I need your help! I'm going crazy with this!
    Also you can easily test it if you have a server available with PHP.

  3. #3
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,045
    In AS3, that's about the worst way you can do that. Look up an actual AS3 version for exporting a JPEG from Flash. You can utilize the new ByteArray class, and you'll send the raw bytes to PHP, then PHP literally can either write those bytes to disk, or spit back out for the user to download. It's so much more efficient and quicker. No looping through columns and rows of colors and stuff.

  4. #4
    Member
    Join Date
    Sep 2007
    Posts
    69
    Quote Originally Posted by MyFriendIsATaco View Post
    In AS3, that's about the worst way you can do that. Look up an actual AS3 version for exporting a JPEG from Flash. You can utilize the new ByteArray class, and you'll send the raw bytes to PHP, then PHP literally can either write those bytes to disk, or spit back out for the user to download. It's so much more efficient and quicker. No looping through columns and rows of colors and stuff.
    Hey!

    Yes I've seen another implementation. It is JPGEncoder and it uses the new ByteArray class.

    At first it didn't work either. I got a weird error, but at this time it's been fixed already.

    Thanks for pointing me to that!

  5. #5
    Member
    Join Date
    Sep 2007
    Posts
    69
    Hi again! I have no choice but to retake this thread. More problems!

    I have a question regarding the use of ByteArray in my case (in order to send an image to PHP which in turn will send it attached in an e-mail).

    I have to provide PHP with the user's e-mail address, retrieved previously from a flash Textfield, besides the stream of image data. So,

    How can I send both the image data and the user's e-mail address? I think this changes things pretty much because the image cannot be sent as raw data anymore...

    any help about this?

  6. #6
    Member
    Join Date
    Sep 2007
    Posts
    69
    I made it!!!

    It was simpler than I thought. Although I specified the URL request method as POST in order to send the stream of image data, I still could use the URL to send the e-mail address too, as if I were using the GET method.

    Cheers!!

  7. #7
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,045
    Yes, you could do that, or you could get a bit more complicated and secure with a session. Make on initial call to begin the session. Store whatever data you wanted into the database with a unique session key.

    For example, first name, last name, email address, etc. You can POST all that information, then return the session key.

    Then in your next request, you'll POST your raw image data and pass along the session key through the GET. Like: saveimage.php?sid=12ou3uihjksad8y3oa8wrh

    Make sense?

  8. #8
    Member
    Join Date
    Sep 2007
    Posts
    69
    Quote Originally Posted by MyFriendIsATaco View Post
    Make sense?
    Yes, I think I understand all the process. But you're right, it would complicate things pretty much.

    Anyway I will do that when I finish other functionalities that still have to be implemented. So whenever I retake this, I hope you give me a hand if I need. Your help is really appreciated!

  9. #9
    THE YELLOW FLASH!
    Join Date
    Feb 2008
    Posts
    57
    how can i save it in my server instead of downloading?
    The CodeBreaker!

  10. #10
    Bearded (M|G)od MyFriendIsATaco's Avatar
    Join Date
    Dec 2002
    Location
    Awesomeville.
    Posts
    3,045
    Simple. Instead of spitting the raw bytes back out to the browser, write them to a file.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center