Edit Profile

200090415_1

“Edit Profile" Design

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

200090415_2

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. 

200090415_3

In order to avoid users making an additional step to crop the image size. We provided a online imagecopper – Flex Image Cropping Component.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
  • Byte Array -> Base64 string by 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

廣告

~ 由 shadow 於 四月 16, 2009.

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

 
%d 位部落客按了讚: