Download Source Code: DynamicImage.zip - 2.07KB
 |  |  |
| Generates dynamic HTML images for web pages, on the server side. The System.Drawing.Image can come from a database, from server's file system or from an image generated on-the-fly. This last use case is presented here as image created with custom vertical text required by the client side through a QueryString parameter. | ||
 | |  |
Non-Standard CSS
Standard HTML does not include a statement to generate text displayed vertically. There is a non-standard writing-mode: tb-rl CSS attribute you can use with filter: flipv fliph, but this will work only in Internet Explorer. Try it here:
Your custom text
If you have Internet Explorer, you should see above your custom text with a vertical orientation. This simple example shows your text within a paragraph (P or DIV) with the following specific style: "writing-mode: tb-rl; filter: flipv fliph;".
Vertical Text as Image
An interesting generic solution is presented at Vertical Text in HTML - Creating dynamic vertical text images in webpages. Elaborating on the use case on vertical text as image introduced by Horia Tudosie in Vertical Labels in Web Pages, the author creates a class to generate such bitmaps for web pages.
When all you need is the most simple way to add this functionality to your website, here is the single ASPX page it would be required. We left aside any HTTP Handlers, caching and other kind of elements for the sake of simplicity. You can either copy and save the content below in your own DynamicImage.aspx page, or download the demo project, whose Default.aspx page shows the way you can call DynamicImage from any client, to display vertical HTML text as on-the-fly generated image.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Bitmap bitmap = null;
if (Request["vtext"] != null
&& Request["vtext"].Length > 0)
bitmap = (Bitmap)CreateVerticalTextImage(
HttpUtility.UrlDecode(Request["vtext"]),
Request["rotate"] == "true",
Request["size"] == null ? 10.0F
: (float) Convert.ToDouble(Request["size"]),
Request["bold"] == "true",
Request["italic"] == "true");
// else if ... - Add other image generators here
if (bitmap != null)
{
// returns image as transparent GIF, as array of bytes
bitmap.MakeTransparent(Color.White);
Response.AddHeader("ContentType", "image/gif");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
byte[] bytes = (byte[])System.ComponentModel
.TypeDescriptor.GetConverter(bitmap)
.ConvertTo(bitmap, typeof(byte[]));
bitmap.Dispose();
Response.BinaryWrite(bytes);
Response.Flush();
}
}
/// <summary>
/// Generates an image with custom vertical text
/// </summary>
private System.Drawing.Image CreateVerticalTextImage(
string text, bool rotate, float fsize, bool bold, bool italic)
{
// set font
FontStyle fstyle = FontStyle.Regular;
if (bold) fstyle |= FontStyle.Bold;
if (italic) fstyle |= FontStyle.Italic;
Font font = new Font(FontFamily.GenericSansSerif, fsize, fstyle);
// set vertical text orientation
StringFormat format = new StringFormat();
format.FormatFlags = StringFormatFlags.DirectionVertical;
// creates 1Kx1K image buffer
System.Drawing.Image imageg
= (System.Drawing.Image)new Bitmap(1000, 1000);
Graphics g = Graphics.FromImage(imageg);
SizeF size = g.MeasureString(text, font, 25, format);
imageg.Dispose();
System.Drawing.Image image = (System.Drawing.Image)
new Bitmap((int)size.Width, (int)size.Height);
g = Graphics.FromImage(image);
g.FillRectangle(Brushes.White, 0, 0, image.Width, image.Height);
// rotate image, to show vertical text from bottom up
if (rotate)
{
g.TranslateTransform(image.Width, image.Height);
g.RotateTransform(180.0F);
}
// draw text
g.DrawString(text, font, Brushes.Black, 0, 0, format);
return image;
}
</script>The page actually contains only code-behind, which interprets some query string parameter values and generates a bitmap image with the text contained in vtext. Remark that you can implement the same way other image handlers, for all kinds of images that are not part of the website file system. A database image can be simply returned to the Page_Load handler as a Bitmap, and the same code will take care of adding GIF transparency and translating the image into an array of bytes. Or you can load and transfer an image file that is not directly accessible to the client.
Vertical text is rendered by StringFormat top-down. If you need to show it bottom-up, you need to add a rotate=true to the query string. With size parameter, you can choose another font size. Set bold and/or italic parameters to true if you need bold and/or italic font style.
Online Demo
Assuming you saved your image generation ASPX page as DynamicImage.aspx, to get a client-side image generated by that page you create a HTML IMG element with SRC set to DynamicImage.aspx?rotate=true&vtext=, followed by the URL-encoded value of your custom text. This will generate an image such as the one below. Try it with your own text:
The demo before is actually using this same ASPX page you are looking at as an image generator. We simply added the code before to the Page_Load. If there is a vtext parameter value in the query string, the page acts as an image generator and returns an array of bytes. Otherwise, it renders the HTML page you see here.
Subscribe and Share: 
