Edit Profile

“Edit Profile” Design

After login, users can edit their profile. It will change their password, email and personal icon. 

When the user select a image, it will display the preview immediately. The size of icon is fixed as a square. If the user uploaded a non-square image. The preview will maintain aspect ratio as the above picture. Otherview, it will distort the image if do not maintain aspect ratio. 

In order to avoid users making an additional step to crop the image size. We provided a online imagecopper - Flex Image Cropping Component1 .It can maintain cropper ratio and resize and move the crop area. 

The preview of icon is similar to Image memo. Mainly, FileReference is used to select/browse/preivew/upload the file in the memoImage2-3. FileReference can offer One-stop service. The data type of FileReference is ByteArray. However, the imagecopper just accepts BitmapData or url string which indicated to an external file as the image source. I found that this component used “Loader” to load images and I modified the library of imagecopper to load the bytes data of FileReference. Besides, the cropped images is not the original data of FileReference. The data of FileReference is just for read. The cropped image can not be uploaded by the FileReference. Base on the upload principle of FileReference, it will upload the image data to a URLRequest (php). URLRequest4 can use three types of data source which are

1. ByteArray Object
   
2. URLVariables
   
3. String 

The steps of upload images:5,6

• Get the bitmap data from the preview image by BitmapData variable
• bitmapdata -> Byte Array by JPEGEncoder
  • mx.graphics.codec.JPEGEncoder7
  • Adobe corelib PNGEncoder/JPGEncoder class6
• Byte Array -> Base64 string by Base64Encoder 
  • Base64 encoder/decoder class8,9
  • mx.utils.Base64Encoder
• Pass the string to the PHP file8 and then save on the server by URLVariables & URLRequest

Basically, the above encoders are more or less the same respectively. In order to facilitate the combination with other part of our project, i chose the encoders which are already provided by Flex Builder.

 Reference:

1 Flex Image Cropping Component

2 Uploading Files from Flex using PHP

3 Uploading files in Flex using the FileReference class

4 Adobe Flex 3 language Reference – URLRequest #data

5 Sending Images From Flex to a Server

6 Drawing game for future world @ Goonhilly

7 ImageSnapshot class in Flex 3 SDK

8 Webcam snapshots with Flex3

9 Base64 encoder/decoder class

~ by shadow on 四月 16, 2009.