12 Replies Latest reply on Jun 1, 2009 9:25 PM by GaryGriswold

    Uploading a user modified image

    GaryGriswold

      Hello,

       

      I have been able to give the user the ability to upload an image file to our server using the FileReference class and related URLRequest class, and a PHP scipt on the server.  I have also been able to display the uploaded image by using an <mx:images source="http://host/path" .../>, where host/path is the place it was uploaded to.  Next, I was able to use matrix transforms to give the user the ability to rotate the displayed image.  While I might add other forms of image manipulation in the future, rotation is essential, because people hold their cameras in any of a variety of orientations.

       

      What I have not been able to do is to upload the image after the user has rotated it.  One writer suggested using ImageSnapshot, and that class does appear to have upload capability, but a far as I can tell it is for taking snapshots of display images.  For an uploaded photo using this class would lose a lot of resolution.

       

      To summarize: FileReference has the ability to upload a file from the user's file space to the server, but does not allow the developer to grab a copy and resave a modification of the file.  Then ImageSnapshot has the ability to upload images to the server as long as they are snapshots taken off the screen.  A solution that required Air would also work for me, because I could limit that functionality to those who were using the Air version of our application, but as far as I have been able to tell the File class in Air are intended for read and write to the user's local file system, not the server.

       

      I am certainly hope the answer to this question is not that my requirement is a security violation.

       

      Sincerely yours

       

      Gary Griswold

       

      P.S. The application is an RIA for orphan sponsorship to be made available to churches with close ties to orphanages.

        • 1. Re: Uploading a user modified image
          Rob Rusher Level 1

          I can think of two solutions:

           

          1. Users manually rotate the image at each viewing.

           

          2. Uploader manually rotates the image in the application after it was uploaded and then sends the Bitmap of the rotated image back to the server.

           

          The key thing here is that you'll end up using the Bitmap classes.

          http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Bitmaps_02.html

          • 2. Re: Uploading a user modified image
            GaryGriswold Level 1

            Bob,

             

            Thanks for the response, but my question is still unanswered.  I am able to rotate images. The following is the code that I use to rotate an image.  The two translations are the to make sure that it rotates at center.

             

            if (this.photo != null) {

            var m:Matrix = new Matrix();

            var centerX:Number = this.photo.width / 2.0;

            var centerY:Number = this.photo.height / 2.0;

            m.translate(-1.0 * centerX, -1 * centerY);

            var q:Number  = event.value * Math.PI / 180;  // event.value contains the degrees to rotate

            m.rotate(q);

            m.translate(centerX,centerY);

            this.photo.transform.matrix = m;

             

            What I have not been able to do is to upload the image to the server after the user has rotated it.  The FileReference class will upload a file from the user's local space to the server.  And the ImageSnapshot class will upload a snapshot taken of some UI component off the screen.  The first does not provide a way to operate on the uploaded object in memory, and the second looses the real resolution of the photo.  The URLStream class appears to only be able to download.

             

            This is a strange problem considering there are so many Flex/Flash demo programs out there for photograph upload to a server and website display.  And yet, I have not been able to find even one of these that is doing image manipulation followed by resaving to the server in Flex. I can't believe this feature is actually missing.

             

            Sincerely yours,

             

            Gary Griswold

            • 3. Re: Uploading a user modified image
              run,ryan! Level 3

              what about this way

               

              let user upload the orig image to server and display in flex app. after user rotate it to a proper  angle, submit the rotation to server and let the server manipulate the image, there are bunch of free app avaliable to work with image

              1 person found this helpful
              • 4. Re: Uploading a user modified image
                GaryGriswold Level 1

                run.ryan,

                 

                Thanks for this suggestion.  I think your suggestion would work.  So, are you saying that Flex does not offer any way to upload to the server an image that has been modified by the user in the memory of the application?  Before embarking on a work-around that requires me to repeat tasks on the server that the user did on the client, I would like to be sure that such duplication is really required.  I am surprised that no one from Adobe has weighed in to tell us whether this problem is a result of a limitation in the language.  And if it is a limitation is there a security reason why the limitation was put in place?  Or, is it an unintended limitation that will be fixed in the next release?

                 

                Thanks,

                 

                Sincerely yours,

                 

                Gary Griswold

                • 5. Re: Uploading a user modified image
                  Michael Borbor Level 4

                  Hi Gary, maybe this great article has all the info you need http://www.insideria.com/2008/03/image-manipulation-in-flex.html

                  • 6. Re: Uploading a user modified image
                    run,ryan! Level 3

                    I don't think user is modifying the picture in your felx app, they are just changing the rotation, or say the style of your image component. so there is no 'modified image' in memory at all. You can only take a snapshot but that's not waht you want.

                    • 7. Re: Uploading a user modified image
                      GaryGriswold Level 1

                      Michael Borbor,

                       

                      The article you mentioned is one of my sources.  Let me quote you what he says about uploading an image after it is put through a matrix transform, such as rotation.

                       

                      In the mx.graphics package there is a class called ImageSnapshot and this can be used to capture the bitmapData of you image to print or create a jpeg or png to save. You can event use it to encode a byte stream to send to the server. I am not going to go too deeply into this but will mention that if you used a matrix to draw your bitmap then the resolution will now be at screen resolution regardless of what the dpi was before it was loaded. If you simply send the display object to the printer from the stage it will probably appear pixelatted. You will want to capture the display object with the ImageSnapshot.captureImage and scale it up to about 300 dpi to get a crisper image.

                       

                      Looking closely at the last two sentences, he is saying that you scale up the captured image to avoid pixalation.  If you read the class description of ImageSnapshot, it is very clear that it is not the bitmap of the image that is uploaded but a snapshot of the pixels displayed on the screen.  It is a new bitmap taken off the screen at screen resolution.

                       

                      So, my original question still stands.  Does Flex not have a way for me to take an image that has been modified in the memory of the application and upload that image to a server?

                       

                      Sincerely,

                       

                      Gary Griswold

                      • 8. Re: Uploading a user modified image
                        Michael Borbor Level 4

                        Hey Gary, yes I guess it's a limitation, but I think it's also a matter of performance if you have a 2mb pics, and a user wants to just rotate the image in a flex app, the process of send the 2mb img to the user and then sending it back to the server would add IMHO unnecesary bandwidht usage.

                        • 9. Re: Uploading a user modified image
                          GaryGriswold Level 1

                          Thanks,

                           

                          This is helping to confirm that there is not a specific capability to upload a transformed bitmap from the memory of an application.  I just wish someone from Adobe would confirm was we suspect, and provide some indication if this is a limitation that will be corrected.  I don't really buy the performance argment as a general argument, but one that might be true for some applications.  Personally, I would usually not discard resolution of a customer's image in order to save bandwidth, unless it was clear from the requirements of the application and approval of the customer that this was the correct course of action.

                           

                          Sincerely yours,

                           

                          Gary Griswold

                          • 10. Re: Uploading a user modified image
                            Michael Borbor Level 4

                            Hi again Gary you could contact Adobe Support so they can confirm that if you have Flex Builder, you can also add a request feature here, or you could also try to contact directly someone from the SDK team maybe Chet Haase, or any other they can confirm your theory.

                            • 11. Re: Uploading a user modified image
                              jmrussell22

                               

                              I see that your not sure about using the ImageSnapshot class because of loss of resolution. You could try calculating the difference between the original image size and the image size within your component. Assuming 72 is the dpi for both the original and the ( i assume scaled down ) image within the application you could get a snapshot of the same resolution. Take the original width and height add them together and then add the image component that's displaying the images width/height and divide it into the original and take that number and multiply it by 72 and you have your dpi that you need to take a snapshot of the same width/height of the original image. So if the original were 625x300 and you were displaying it at 150x72, you would get 4.16666666... multiply that by 72 and you have 300dpi. So just use that and the snapshot you take will display nicely at the original width height.

                               

                              I've been doing testing with the snapshot/uploading that I have that are around 1024x768 and only display in the app at around... 300 - 600px wide (keeping height with ratio) and they've turned out well. I've not done rotation with these images but have made color changes and addition of text.

                               

                              Hope this helps...

                               

                              Michael Russell

                               

                              • 12. Re: Uploading a user modified image
                                GaryGriswold Level 1

                                Hello,

                                 

                                I wanted to bring closure to this question and thank those who responded.  Two solutions were proposed.  One was to use the Snapshot class to capure the image as modified on the screen, and the other was to modify the image on the server using server based tools.  I have implemented the second solution using ImageMagick tools, (actually php Imagick, because I like php, but any language's library of ImageMagick tools would have worked).  For my application, the solution has the advantage that I could perform each image transformation starting with the original image as uploaded by the customer, and give them the best image resolution possible.  Because the transformations were simple, it was possible to repeat them on the server.  If I had allowed customers to manipulate the image in complex ways to their visual taste, it would have been impossible to duplicate the user's actions on the server, and the SnapShot class would be the only way that we have identified to perform this task.  Thanks everyone for your input.

                                 

                                I am still confused about why the Flex 3 language does not allow one to upload a image file from the memory of the application to a server after modification of the image file.

                                 

                                Sincerely yours,

                                 

                                Gary Griswold