WPF Korea +_+ :: WPF ASCII Art(Character Art)

WPF2009/07/28 03:14

WPF ASCII Art(Character Art)

안녕하세요. 김대욱입니다. 자기전에 포스팅 하나 하고자야겠다 싶어 새벽 포스팅 시작합니다. ㅎㅎ

이번시간에 소개해 드릴 내용은 WPF를 이용해 아래와 같이 문자열로 이루어진 이미지를 만드는 방법입니다. 제목은 조금 거창하게 ASCII Art라고 소개했지만 일정 공백을 두고 픽셀 정보를 가져와 이를 문자열로 바꾸기만하면되는.. 매우 간단한 예제가 되겠습니다...(낚시 제목.. ㅈㅅ) 아래 사진속 고양이는 저희집에서 저와 함께 살고 있는 쿠루 입니다 +_+

위 그림에서 보시다 시피 이미지를 입력하면 해당이미지를 문자로만 이루어진 이미지로 변환 하기 때문에 폰트 크기가 작으면 작을 수록 원본이미지와 유사한 이미지로 나타나는 것을 확인 하실 수 있습니다. 구현 방법 소개에 앞서 동영상을 보면서 어떻게 동작하는지 한번 생각해보시기 바랍니다~!! 동영상 캡쳐할때 화질이 좋지 못해서 색상이 이상하게 표현되네요 ㅠㅠ ㅋ 화질좋고 빠른 동영상 캡쳐 툴 있으면 추천해주세요~!~!

사실 이번시간에서의 중요한 대부분의 코드는 XAML보다는 C#코드로 되어있습니다. 설명은 주석에 적어놨으니 참고하시길 바라며 아래는 이미지의 경로를 입력하면 임의의 문자열과 적합한 색상값을 갖는 객체를 추출 하는 작업에 대한 코드입니다.

public static List<ASCIIArtElement> Make(string Path, int ResultWidth, int ResultHeight)
{

// 생성 결과가 저장될 공간
    List<ASCIIArtElement> Result = new List<ASCIIArtElement>();
    
    int BitmapHeaderSize = 54;

// Step #1. 입력받은 Path로부터 BitmapImage를 생성
    BitmapImage Image = new BitmapImage(new Uri(Path));

// Step #3. BmpBitmapEncoder를 사용하여 Image를 Bmp형식으로 변환   
    BmpBitmapEncoder Encoder = new BmpBitmapEncoder();
    Encoder.Frames.Add(BitmapFrame.Create(Image));

// Step #4. Encoder에 저장된 내용을 MemoryStream에 저장
    MemoryStream MemoryStream = new MemoryStream();
    Encoder.Save(MemoryStream);

// Step #5. 헤더를 부분을 건너 뜀,Bitmap Fileformat과 관련된 내용은 
    //          http://en.wikipedia.org/wiki/BMP_file_format 를 참고하세요.
    MemoryStream.Seek(BitmapHeaderSize, SeekOrigin.Begin);

// Step #6. 출력 Size에 맞게 공백크기 지정, 만약 출력크기가 원본보다 크면 공백은 1
    int XSpace = Image.PixelWidth > ResultWidth ? Image.PixelWidth / ResultWidth : 1;
    int YSpace = Image.PixelHeight > ResultHeight ? Image.PixelHeight / ResultHeight : 1;

int Offset = 0; // MemoryStream에서 사용할 Offset

// 임의의 ASCII값을 추출하기 위한 Random Class정의
    Random Rand = new Random((int)DateTime.Now.TimeOfDay.TotalMilliseconds);

// Step #7. 공백만큼의 간격을두고 루프를 돌면서 순차적으로 픽셀정보 및 아스키값을 기록
    //          ※ BMP Format에는 Y가 거꾸로 저장되어 있으므로 Y가 끝에서 부터 시작
    for (int Y = Image.PixelHeight - 1; Y > 0; Y -= YSpace)
    {
        for (int X = 0; X < Image.PixelWidth; X += XSpace)
        {
            Offset = (Image.PixelWidth * 4) * Y + (X * 4) + BitmapHeaderSize;
            MemoryStream.Seek(Offset, SeekOrigin.Begin);

Color Color = new Color();
            Color.A = 255;
            Color.B = (byte)MemoryStream.ReadByte();
            Color.G = (byte)MemoryStream.ReadByte();
            Color.R = (byte)MemoryStream.ReadByte();

ASCIIArtElement Element = new ASCIIArtElement();
            Element.Color = Color;

// ASCII Art에 사용할 임의의 문자열 지정
            // 특정 문자열로 반복하게 하고싶다면 이부분 수정
            Element.ASCII = ((char)(Rand.Next('A', 'Z'))).ToString();

Result.Add(Element);

}

// Y값이 변하면 줄바꿈이 발생한 것이므로 Br!!
        Result.Add(new ASCIIArtElement() { ASCII = "<br>" });

}

// Step #8. 결과 리턴
    return Result;

}

코드자체가 어렵진 않기때문에 이해하시는 데에는 큰 무리가 없을것으로 생각되며, 제가 이번시간에 ASCII ART예제를 준비하면서 말씀드리고 싶은 중요한 내용은 BmpBitmapEncoder를 이용해서 간단하게 PixelData를 가져올수 있다~!~! 라는것입니다. 예전에 System.Drawing.Bitmap객체를 활용해서 Pixel Data를 접근 방법에 대해 소개해 드린적이있지만, Bitmap Class는 WPF에서 기본적으로 사용하는 Class가 아니기때문에 Reference를 추가하는 등에 작업이 필요합니다, 하지만BmpBitmapEncoder와 MemoryStream을 사용하면 위 작업을 하지 않아도 PixelData에 접근이 가능하기 때문에 이번 예제와 같은 내용을 개발하실 때 상당히 유용할것 같습니다. (단, 위 방법을 사용하실 경우 수정시 원본이미지에 반영 되지는 않습니다..)

나머지 위 코드를 호출하는 부분등은 아래 첨부한 소스코드를 보시면 확인하실수 있습니다. 기타 질문이나 문의 요청사항은 이메일이나 리플 오른쪽 포스팅 소제 제공을 통해 문의 하시면 되겠습니다 ^^

PS. 제작할때 폰트를 굴림체, 돋움체, 궁서체 등 모든 문자의 크기가 동일한 폰트를 활용하면 굳~~~~ 입니다.

WPFASCIIART.zip