10 Replies Latest reply on Jul 6, 2010 4:30 AM by Scott R. Hamilton

    Saving an image to MySQL

    Scott R. Hamilton Level 1

      I'm trying to capture and save a image to a blob field in a mySQL

      database. I'm getting an http request error.

       

      Just what should my code be passing to the SQL insert query?  Nothing

      seems to work. (see the function captureImg)

       

      Thanks,

       

      Scott

       

       

      Here's the code to capture and encode the image (this is a standard sample program):

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white" viewSourceURL="srcview/index.html">
             
      <mx:Script source="MySqlQry.as"/>
      <mx:Script source="MySqlReturnHandlers.as"/>

       

          <mx:Script>
              <![CDATA[
                  import mx.graphics.ImageSnapshot;
                  import mx.graphics.codec.*;

       

                  private const jpgEnc:JPEGEncoder = new JPEGEncoder();
                  private const pngEnc:PNGEncoder = new PNGEncoder();
                  private var ohSnap:ImageSnapshot;
                 
                  private function captureImg(imgEnc:IImageEncoder):void {
                    
                      ohSnap = ImageSnapshot.captureImage(img, 0, imgEnc);
                      textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);
                      InsertImage(ohSnap);
                  }
              ]]>
          </mx:Script>

       

          <mx:ApplicationControlBar dock="true">
              <mx:ToggleButtonBar id="toggleButtonBar"
                      itemClick="captureImg(event.item.data);">
                  <mx:dataProvider>
                      <mx:Array>
                          <mx:Object label="Capture as JPEG" data="{jpgEnc}" />
                          <mx:Object label="Capture as PNG" data="{pngEnc}" />
                      </mx:Array>
                  </mx:dataProvider>
              </mx:ToggleButtonBar>
          </mx:ApplicationControlBar>

       

          <mx:Image id="img"
                  source="@Embed('../image/logo.jpg')" />

       

          <mx:TextArea id="textArea"
                  editable="false"
                  width="320"
                  height="160" />

       

      </mx:Application>

       

      The routine the make the hpptService call ensding the query to mySQL:

       

      private function InsertImage(imsSnap:ImageSnapshot):void {
          var sQry:String;
          sQry = "INSERT INTO image (picture) VALUES('" +imsSnap.data +"')";
          //Alert.show(sQry);
          mysqlQuery(sQry, "InsertImage");
      }

       

       

      I am getting an http request error.

       

       

      Scott

        • 1. Re: Saving an image to MySQL
          David_F57 Level 5

          hi,

           

          If you want to save images to the db using amfphp is the way to go, it deals with the byte array directly so after you encode you simply pass the bytearray to mysql through a remote object, catalog.uploadImage(TmpImg) passes the bytearray(png or jpg) to mysql database quickly and cleanly.

           

          the php at the server end

           

          function uploadImage($ba) {

          $data = $ba->data;

          $mysql = mysql_connect(localhost,"root","");

          $data = mysql_real_escape_string($data);

          mysql_select_db( "catalog" );

          $Query = "INSERT INTO images (ID,data) VALUES(0,'$data')";

          $Result = mysql_query( $Query );

          return $Result;

          }

           

           

          the call from the application

           

          private function saveImage(bd:bitmapData) : void

          {

          var ba:byteArray= new byteArray()     

          {

             ba = PNGEncoder.encode(bd);

          }

          finally

          {

          catalog.uploadImage(ba);

          }

          }

          • 2. Re: Saving an image to MySQL
            Scott R. Hamilton Level 1

            Hi David,

             

            thanks for the reply.

             

            I'm using SQLDataServices which I purchased from Adobe and
            which only offers a HTTPService call using the POST method.

             

            Is there no way I can use this method to save the image to
            the database?

             


            Scott

            • 3. Re: Saving an image to MySQL
              UbuntuPenguin Level 4

              You should check out flexlibs its on google somewhere.  They have a function/class that takes an image and turns it into a string.  You can then set this string as a parameter in your httpservice and do what david said as far as pushing it into the db.  There is also the base64 class you can use to turn the image into a string somehow , but I forgot how to use it.

               

              Sincerely ,

                Ubu

              • 4. Re: Saving an image to MySQL
                Scott R. Hamilton Level 1

                Thanks Ubu,

                 

                there is a JPEGEncoder class in standard flex.

                 

                Do you have any idea how the flexlibencoder  differs from this?

                 

                Regards,

                 

                Scott

                • 5. Re: Saving an image to MySQL
                  UbuntuPenguin Level 4

                  Not really sure how they differ.  I believe the flexlib encoder came about at a relatively earlier time , or came with more convenience features.  Here is an example of how to use the stock Base64Encoder in actionscript.  You should modify it to suit your needs.

                  http://expertria.com/index.php/archives/30

                   

                  If this post was helpful , please mark it as such.

                   

                  import flash.display.BitmapData;
                  import com.adobe.images.JPGEncoder;
                  import mx.utils.Base64Encoder;
                  import flash.utils.ByteArray;

                  private static const QUALITY:Number =80

                  function getBase64FromComponent(photo:UIComponent) :String
                  {

                  var data1:BitmapData = new BitmapData(photo.width, photo.height); data1.draw(photo);

                  var en:JPGEncoder = new JPGEncoder(QUALITY);
                  var bArray:ByteArray=   en.encode(data1);

                  var encoder:Base64Encoder = new Base64Encoder();
                  encoder.encodeBytes(bArray, 0, bArray.length);
                  var base64data:String = encoder.flush();
                  return base64data;

                  }

                  1 person found this helpful
                  • 6. Re: Saving an image to MySQL
                    Scott R. Hamilton Level 1

                    Thans Ubu,

                     

                    my problem is not so much the encoding of the image, its the

                    saving of it to the database.

                     

                    Here's my encode code:

                     

                    var

                     

                     

                     

                     

                     

                    ohSnap:ImageSnapshot;

                    ohSnap = ImageSnapshot.captureImage(img, 0, imgEnc);

                    textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);

                     

                    What should I write to the database -  ohSnap.data, or textArea.text?

                    Should I enclose the byte array in quotes?

                     

                    What is tht best data type to receive the bytearray, a blob?

                     

                    When I try top write the data to the database I get an

                    HTTP request error.

                     

                    Scott

                    • 7. Re: Saving an image to MySQL
                      UbuntuPenguin Level 4

                      What I would do is , encode the image as a string for  transport purposes.  Then on the backend , transform the string into a bytearray.  Store that bytearray in the mysql database as a BLOB object.

                       

                      Sincerely ,

                        Ubu

                      • 8. Re: Saving an image to MySQL
                        Scott R. Hamilton Level 1

                        I just did a little experiment.

                         

                        I encoded an image (the flex logo) and copied the byte array to

                        a text area. I copied this text using control-C.

                         

                        I entered a record into my MySQL table manually and added the

                        text using control-V between two single quotes '<byte array>'

                        into the blob column. This worked.

                         

                        I just can't do the same using an HTTP service call.

                         

                         

                        Scott

                        • 9. Re: Saving an image to MySQL
                          UbuntuPenguin Level 4

                          So are you turning the image into a base64 encoded string and then sending it as a parameter of the HTTPService ?

                          • 10. Re: Saving an image to MySQL
                            Scott R. Hamilton Level 1

                            Yes, that's right. Here is the pertinent code:

                             

                             

                            In the flax app:

                             

                             

                             

                            private function captureImg(imgEnc:IImageEncoder):void {

                             

                            var ohSnap:ImageSnapshot;

                            ohSnap = ImageSnapshot.captureImage(img, 0, imgEnc);

                            textArea.text = ImageSnapshot.encodeImageAsBase64(ohSnap);

                            InsertImage(textArea.text);

                            }

                             

                            In the HTTP service AS module:

                             

                            private

                             

                             

                            function InsertImage(sImageCoded:String):void {

                             

                            var sQry:String;

                            sQry =  

                            "INSERT INTO image (lImageId, blbBitMap, txtImage, lRecipeId) "

                            sQry +=

                            "VALUES(0, '" +sImageCoded +"', 'text', 23)"

                             

                            //Alert.show(sQry);

                            mysqlQuery(sQry,

                            "InsertImage");

                            }

                             

                            As mentioned previously, an HTTPrequest error is generated although I can enter

                            the string into the blob manually in MySQL.

                             

                            Scott