Flex에서 이미지 에디터 제작에 가장 기초가 되는 것은 이미지를 편집하기 위한 환경을 만드는 것이다.
하지만 보안문제로 로컬에 있는 자원(이미지를 포함)을 직접사용하는 것을 불가능하다.
그래서 로컬자원을 서버에 전송후 그 전송된 자원을 읽어와 사용하게 되는데,
이러한 과정에 대해 공부해볼 수 있는 Flex & PHP 소스를 첨부했다.

동작방식은 다음과 같다.

로컬에 있는 이미지를 FileReference를 이용해 서버에 전송후
그 이미지를 다시 로드하며 화면에 보여준다.
이미지를 로드할 때, 보통 이미지의 경로를 이용해 Image 클래스의 source나 Loader 클래스의 load 함수를 이용한다.
하지만 여기서 사용한 방식은 이와 다르다.
저장된 이미지만 로드할 뿐 아니라 그에 관련된 여러정보도 함께 가져오고자 한다.
가령, 여러정보에는 사진의 각종 Header 정보가 담겨있을 수 있다. 이것을 서버단에서 해석해서 Flex에 전송하고 싶을때가 있을 것이다. 이럴때는 단순히 Image나 Loader로 이미지만 받아서는 안 될 것이다.
(물론 할 수 있지만 이미지와 다른 정보를 분리해서 load처리해야하므로 복잡하다.)
그래서 URLLoader를 이용해 이미지의 Base64로 encode된 정보와 기타정보를 얻어온다.
Base64로 얻어온 정보는 다시 decode를 거쳐 ByteArray로 변환한다음 Image의 load() 함수의 인자로 넘겨주면 이미지가 화면에 보이게 된다. 디지털 카메라로 찍은 이미지는 Header정보가 담겨있을 수 있으므로 ByteArray형태로 이미지를 가져올 수 있는 것은 좋은 방법이다. 여기서는 그에 대한 방법은 제시하지 않았다.

첨부한 프로그램에는 사진을 편집하는 기능이 없지만
편집기능을 추가할 수 있겠다.

이미지 편집을 완료 후
서버에 전송하기 위해 ImageSnapshot 클래스를 이용해 JPG또는 PNG에 대한 Base64 형태의 정보를 뽑아낼 수 있고 이 정보를 서버에 전송해서 이미지를 저장하도록 한다.

첨부소스를 보면 알겠지만
아주 단순하게 만들어져있고 개선을 해야 쓸 수 있다.
여러개의 이미지를 동시에 전송할려면 여러가지 수정해야할 것이다.
그리고 "저장-로드-다시저장" 과정에 대한 Process가 담긴 Class를 만들어 사용해야 효율적이겠다.

소스는 다음 링크에서 볼 수 있겠다.


실행화면



참고내용
Using the ImageSnapshot class to capture images as JPEGs or PNGs in Flex 3
Displaying an image saved as a Base64 encoded string in Flex 3
[Flex] 화면캡쳐는 ImageSnapshot 클래스를 사용하자.


글쓴이 : 지돌스타(http://blog.jidolstar.com/317)