WPF Korea +_+ :: Simple Photo Mosaic Using WPF

WPF2009/06/14 23:34

Simple Photo Mosaic Using WPF

안녕하세요. 이번시간에는 WPF를 사용해서 간단하게 PhotoMosaic을 구현 해보도록 하겠습니다. 아래는 시연 동영상이며, 화면이 작아 잘안 보이시는 분들을 위해 설명을 드리자면 모자이크를 만들고자 하는 원본 이미지를 불러오고 모자이크에 사용하고자 하는 이미지의 검색어를 입력한뒤 Make버튼을 누르게 되면 Flickr에서 검색어에 해당하는 이미지를 불러와 원본이미지와 함성해주는 내용입니다.

결과를 자세히 살펴보면 다음과 같습니다. (허락 없이 올린 여자친구 사진인데.. 혼나면 어떡하지.............. -_-)

사진을 확대해보면 여러장의 사진이 모여 하나의 사진을 이루고 있는 모습을 확인 하실 수 있습니다.. PhotoMosaic을 구현하는데 있어 색상정보를 기반으로 하는 방법등 여러가지 방법이 있지만, 이번시간에 구현한 방법은 가장 간단하게 구현 할 수 있는 Tile Image의 투명도를 조절하여 구현하는 방법입니다.

아래는 PhotoMosaic을 구현하는데 사용한 소스코드이며 코드에 대한 설명은 주석으로 달아놓았습니다!!

public class PhotoMosaic 
{

// 자신의 Flickr API Key로 설정하세요.
    public const string FLICKRKEY = "#########################";

public double TileWidthScale { get; set; }
    public double TileHeightScale { get; set; }

public BitmapImage SourceImage { get; set; }

public DrawingImage Make(string Keyword)
    {

// Flickr를 통해 이미지를 검색해서 가져온다.
        List<BitmapImage> MosiacImage = SearchImage(Keyword);

// SourceImage가 없다면 null을 리턴
        if (SourceImage == null) return null;

// Photo Mosaic결과가 저장될 DrawingImage객체
        DrawingImage ResultImage = new DrawingImage();

// Photo Mosaic데이터를 저장하기 위한 DrawingGroup
        DrawingGroup Group = new DrawingGroup();

// BitmapImage를 Drawing하기 위한 DrawingContext
        DrawingContext DrawingContext = Group.Open();

// SourceImage의 크기
        int SourceImageWidth = SourceImage.PixelWidth;
        int SourceImageHeight = SourceImage.PixelHeight;

// Mosaic Image의 크기
        double ImageWidth = SourceImageWidth * TileWidthScale;
        double ImageHeight = SourceImageHeight * TileHeightScale;

// 실제 PhotoMosiac 제작 부분. 바탕에 원본이미지를 그려준다.
        DrawingContext.DrawImage(SourceImage, new Rect(0, 0, SourceImageWidth, SourceImageHeight));

// DrawingContext에 Opacity를 Push해서 이후 그려질
        // Mosaic조각들에 대한 Opacity를 지정
        // Opacity가 낮을 수록 원본이미지가 선명하게 보임
        DrawingContext.PushOpacity(0.3);

// MosaicImage에 저장된 이미지중 랜덤으로 하나씩 선택하여 Mosaic을 수행
        Random Random = new Random((int)DateTime.Now.TimeOfDay.TotalMilliseconds);
        for (double X = 0; X < SourceImageWidth - 1; X += ImageWidth)
        {
            for (double Y = 0; Y < SourceImageHeight - 1; Y += ImageHeight)
            {
                DrawingContext.DrawImage(MosiacImage[Random.Next(0, MosiacImage.Count)], 
                    new Rect(X, Y, ImageWidth, ImageHeight));

}
        }

// DrawingContext의 Opacity를 Pop.
        DrawingContext.Pop();

// DrawingContext 닫기
        DrawingContext.Close();

// PhotoMosaic 데이터가 저장된 DrawingGroup을 ResultImage에 저장
        ResultImage.Drawing = Group;

// 결과 return.
        return ResultImage;

}

private List<BitmapImage> SearchImage(string Keyword)
    {

// Flickr에서 사진을 검색하기위해 Flickr API사용
        Flickr Flickr = new Flickr(FLICKRKEY);

// Flickr에서 Keyword로 사진을 검색
        Photos Photos = Flickr.PhotosSearchText(Keyword);

// Flicker Photo객체를 BitmapImage로 변환
        List<BitmapImage> Images = new List<BitmapImage>();
        foreach (Photo PhotoItem in Photos.PhotoCollection)
        {
            BitmapImage ImageItem = new BitmapImage();
            ImageItem.BeginInit();

// Mosaic에 사용될 Image는 크기가 작아도 무방하므로 ThumbnailImage를 사용
            ImageItem.UriSource = new Uri(PhotoItem.ThumbnailUrl);
            // 빠른 처리를 위해 Cache사용
            ImageItem.CacheOption = BitmapCacheOption.OnLoad;
            ImageItem.CreateOptions = BitmapCreateOptions.PreservePixelFormat;

ImageItem.EndInit();

Images.Add(ImageItem);
        }

return Images;

}

간단하게 요약하자면 DrawingImage를 사용해 원본이미지를 가장 먼저 그리고 Flickr에서 검색된 이미지들을 랜덤하게 그려주는 과정을 수행합니다. 이때 Flickr에서 검색된 Tile Image의 Opacity를 낮춰 배경이 비치도록 만들어 마치 여러장의 이미지들이 하나의 이미지를 이루는것과 같은 효과를 냅니다.

위 코드에서 가장 중요한 부분은 Flickr에서 이미지를 불러올때 CacheOption을 사용하여 이미지가 재사용될때 빠르게 응답할 수 있도록 하는 부분에 있습니다. (CacheOption을 사용하지 않으면 저장할때 엄청난 시간이 소요될 수 있습니다..)

실제 사용하실 때에는 아래와 같이 간단히 객체를 생성한뒤 Source Image를 지정하고 Tile의 Scale을 지정한 뒤 Make함수를 호출하시면 되겠습니다.

아래는 이번시간에 사용된 전체소스코드이며 기타 질문이나 요청 문의 등은 이메일 또는 리플로 남겨주시면 답변드리겠습니다 ^^

PhotoMosaicSample.zip