472,126 Members | 1,658 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,126 software developers and data experts.

How to create a colored ASCII art from a colored graphic image

> I have a graphics images that I want to convert to
ASCII art. How do I do it?

- Default.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
using System.IO;

namespace AsciiArt
public class WebForm1 : System.Web.UI.Page
protected System.Web.UI.WebControls.TextBox txtOutput;
protected System.Web.UI.WebControls.Button btnGo;
protected System.Web.UI.HtmlControls.HtmlInputFile file;
protected System.Web.UI.WebControls.TextBox txtInput;
private void Page_Load(object sender, System.EventArgs e)
if (!Page.IsPostBack)
StringBuilder input = new StringBuilder();
for (int i = 0; i < 2500; i++)
input.Append("blah ");
txtInput.Text = input.ToString();

private string ColorizeText(System.Drawing.Image image, string
//determine how to scale the text
int textLength = input.Length;
int imageHeight = image.Height;
int imageWidth = image.Width;
double ratio = (double)imageHeight / (double)imageWidth;
StringBuilder output = new StringBuilder();

//letters are about twice as tall as wide; correct
ratio /= 2;

//height * width = text
//height / width = ratio
//width = text / height
//width = height / ratio
//height / ratio = length / height
//height^2 = ratio * text
//height = sqrt (ratio * text)
int rows = (int)(Math.Sqrt(ratio * textLength));
int columns = (int)(textLength / rows);

//Chop the text into rows, since the word breaks will
cause this to be a little
//uneven so the exact row count is variable.
string inputBuffer = input;
ArrayList rowText = new ArrayList();
int startPointer = 0;
int endPointer = columns;

endPointer = input.LastIndexOf(" ",(startPointer +
rowText.Add(input.Substring(startPointer,endPointe r-startPointer));
startPointer = endPointer + 1;
while (startPointer+columns<=input.Length);

if (startPointer<input.Length)

using (Bitmap bitmap = new

output.Append("<span style='font-family: Lucinda
Console,Courier New;font-size: 8px;'>");

int rowCtr = 0;
int colCtr = 0;

//Iterate the rows
foreach (string row in rowText)
colCtr = 0;

//Iterate each character in the row
foreach (char letter in row.ToCharArray())
if (letter == ' ')
Color color =

//If the pizel is white, darken it up a
if (color.GetBrightness() > .8)
color='#{0:X2}{1:X2}{2:X2}'>{3}</font>", (int)(.75*color.R),
(int)(.75*color.G), (int)(.75*color.B), letter);
color='#{0:X2}{1:X2}{2:X2}'>{3}</font>", color.R, color.G, color.B,
return output.ToString();

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
// CODEGEN: This call is required by the ASP.NET Web Form
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
this.btnGo.Click += new
this.Load += new System.EventHandler(this.Page_Load);


private void btnGo_Click(object sender, System.EventArgs e)
using (System.Drawing.Image image =
System.Drawing.Image.FromStream(file.PostedFile.In putStream))
string colorizedText = ColorizeText(image,
txtOutput.Text = colorizedText;
catch (Exception ex)

- Default.aspx

<%@ Page language="c#" Codebehind="Default.aspx.cs"
AutoEventWireup="false" validateRequest="false"
Inherits="AsciiArt.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
body {
font: Tahoma, Arial, sans-serif;
margin : 15px 0px 0px 15px;
background : #f3f4fb;
<form id="Form1" method="post" runat="server">
<h3>A slightly different take on the ASCII Art thing. This
takes your block of ascii text and colorizes it to match the colors in
the image you upload. Makes more sense when you see it in action -
give it a try:</h3>
<LEGEND>1. Upload source image</LEGEND>
<INPUT type="file" runat="server" id="file">
<LEGEND>2. Enter text to be colorized</LEGEND>
<asp:TextBox id="txtInput" runat="server" Rows="10"
Columns="60" TextMode="MultiLine"></asp:TextBox>
<LEGEND>3. Delight in your glorious new HTML</LEGEND>
<asp:TextBox id="txtOutput" runat="server" Rows="10"
Columns="60" TextMode="MultiLine"></asp:TextBox></P>
<asp:Button id="btnGo" runat="server"
Nov 16 '05 #1
0 2032

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Charax | last post: by
5 posts views Thread by Steve Amey | last post: by
3 posts views Thread by Richard Skopal | last post: by
4 posts views Thread by Iacopo.Marmo | last post: by
11 posts views Thread by Mark B | last post: by
1 post views Thread by Mark B | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.