Date Image Thing
I want to be trendy, too
For shiggles, I wanted to add a nice little trendy date format to my postings, but everything I found seemed a bit too wordy for me. It always looks like this:
<div class="post-date">
<span class="month">10</span>
<span class="day">04</span>
<span class="year">1977</span>
</div>
This site is dynamically generated, so it wouldn't take too much effort in order to implement such a structure, but I'm stubborn... so here goes
Overprocessed, Nerdy Post Date Image Generation
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
dim strDt as string = request.querystring("dt")
dim strMonth as string = left(MonthName(Month(strDt)),3).ToUpper()
dim strDay as string = Day(strDt).ToString()
if strDay.Length=1
strDay="0" & strDay
end if
dim strYear as string = Year(strDt).ToString()
Dim baseMap as Bitmap = new Bitmap(95, 13)
'13 cuts it off, which looks cool -- see emersian.com
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
Dim upBrush as SolidBrush = new SolidBrush(Color.black)
Dim downBrush as SolidBrush = new SolidBrush(Color.steelblue)
Dim MonthFont as Font = new Font("tahoma", 11,FontStyle.Bold)
Dim dtFont as Font = new Font("tahoma", 14,FontStyle.Bold)
myGraphic.FillRectangle(new SolidBrush(Color.white), 0, 0, 100, 25)
myGraphic.DrawString(strMonth, MonthFont, upBrush, 0, 0)
myGraphic.DrawString(strDay, MonthFont, downBrush, 30, 0)
myGraphic.DrawString(strYear, MonthFont, upBrush, 50, 0)
myGraphic.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
Response.ContentType = "image/gif"
baseMap.Save(Response.OutputStream, ImageFormat.GIF)
myGraphic.Dispose()
baseMap.Dispose()
End Sub
</script>
%>
Usage
< img src="dt.aspx?dt=DATE STRING HERE" />
GDI+ Font Embedding
The Code: h1.aspx
<%@ Page EnableSessionState="false" Trace=True Language="vb" debug="true" validateRequest=false %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import namespace="System.Drawing.Drawing2D" %>
<%@ Import namespace="System.Drawing.Text" %>
<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
dim myString as String
myString = request.querystring("h1")
Dim baseMap as Bitmap = new Bitmap(600, 50)
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
Dim upBrush as SolidBrush = new SolidBrush(Color.FromArgb(0,0,0))
Dim backBrush as SolidBrush = new SolidBrush(Color.FromArgb(255,255,255))
Dim familyNameAndStyle As String
Dim FontCollection As New PrivateFontCollection()
FontCollection.AddFontFile(Server.MapPath("TYPEWRIT.TTF"))
Dim thisFont As FontFamily
thisFont = FontCollection.Families(0)
Dim fontTitle As New Font(thisFont, 18)
'or use a system font
'Dim fontTitle as Font = new Font("tahoma", 16)
familyNameAndStyle = thisFont.Name
myGraphic.TextRenderingHint = System.Drawing.Text.TextRenderingHint.ClearTypeGridFit
myGraphic.SmoothingMode = SmoothingMode.Antialias ' antialias objects
myGraphic.FillRectangle(backBrush, 0, 0, 600, 50)
myGraphic.DrawString(myString, fontTitle, upBrush, 5, 5)
Response.ContentType = "image/jpeg"
baseMap.Save(Response.OutputStream, ImageFormat.JPEG)
myGraphic.Dispose()
baseMap.Dispose()
End Sub
</script>
Usage
<img src="h1.aspx?h1=Hello World" />
Example
Dynamic Color Shifting
The Code: colorshift.aspx
<%@ Page Explicit="True" Language="VB" Debug="True" %>
<%@ import namespace="system.drawing" %>
<%@ import namespace="system.drawing.imaging" %>
<%@ Import Namespace="system.io" %>
<script runat="server">
Dim Filename
dim Img as System.Drawing.Bitmap
dim x,y,h,w,l,s as Integer
sub CreateGraphic()
Filename = Request.QueryString("filename")
Filename = server.mappath(Filename)
Img = system.drawing.bitmap.FromFile(Filename)
s = Request.QueryString("s")
h = Img.height
w = Img.width
for y = 1 to h-1
for x = 1 to w-1
Dim c as Color = Img.GetPixel(x,y)
l = CInt(c.R*0.3 + c.G*0.59 + c.B*0.11)
if s = 0 then '0 = GRAYSCALE
Img.SetPixel(x,y,Color.FromArgb(l,l,l))
elseif s = 1 then '1 = RED
Img.SetPixel(x,y,Color.FromArgb(l,0,0))
elseif s = 2 then '2 = GREEN
Img.SetPixel(x,y,Color.FromArgb(0,l,0))
elseif s = 3 then '3 = BLUE
Img.SetPixel(x,y,Color.FromArgb(0,0,l))
elseif s = 4 then '4 = PURPLE
Img.SetPixel(x,y,Color.FromArgb(l,0,l))
elseif s = 5 then '5 = YELLOW
Img.SetPixel(x,y,Color.FromArgb(l,l,0))
elseif s = 6 then '6 = BLUE-GREEN
Img.SetPixel(x,y,Color.FromArgb(0,l,L))
end if
next
next
end sub
</script>
<%
CreateGraphic
Img.Save(Response.OutputStream, ImageFormat.JPEG)
Img.dispose()
response.end
%>
Usage
<img src="colorshift.aspx?filename=FILENAME.JPG&s=CHOOSE 0 THRU 6 SEE CODE" />
Example
GDI+ Security String image
The Code: verify.aspx
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<%@ Import namespace="System.Drawing.Drawing2D" %>
<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
Dim r as New Random
Dim baseMap as Bitmap = new Bitmap(200, 50)
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
Dim HBrush As HatchBrush = New HatchBrush( RandomHatch(), GetRandomColor(r))
Dim upBrush as SolidBrush = new SolidBrush(GetRandomColor(r))
Dim fontTitle as Font = new Font("tahoma", 24)
myGraphic.FillRectangle(HBrush, 0, 0, 200, 50)
myGraphic.DrawString(RandomStringGenerator(6), fontTitle, upBrush, r.Next(0, 80), r.Next(0, 10))
Response.ContentType = "image/jpeg"
baseMap.Save(Response.OutputStream, ImageFormat.JPEG)
myGraphic.Dispose()
baseMap.Dispose()
End Sub
Public Function RandomStringGenerator(ByVal intLen As Integer) As String
Dim rRandom As New Random()
Dim Zero As Integer = Asc("0")
Dim Nine As Integer = Asc("9")
Dim capA As Integer = Asc("A")
Dim capZ As Integer = Asc("Z")
Dim litA As Integer = Asc("a")
Dim litZ As Integer = Asc("z")
Dim iRandNum as integer
Dim strTemp as String = ""
Dim i As Integer
While i < intLen
iRandNum = rRandom.Next(Zero, litZ)
If ((((iRandNum > = Zero) And (iRandNum <= Nine) Or _
(iRandNum > = capA) And (iRandNum < = capZ) Or _
(iRandNum > = litA) And (iRandNum < = litZ)))) Then
strTemp = strTemp + Chr(iRandNum)
i+=1
End If
End while
Return strTemp
End Function
Public Function RandomHatch() As HatchStyle
Randomize()
Select Case Rnd() * 56
Case Is < 1 : Return HatchStyle.BackwardDiagonal
Case Is < 2 : Return HatchStyle.Cross
Case Is < 3 : Return HatchStyle.DarkDownwardDiagonal
Case Is < 4 : Return HatchStyle.DarkHorizontal
Case Is < 5 : Return HatchStyle.DarkUpwardDiagonal
Case Is < 6 : Return HatchStyle.DarkVertical
Case Is < 7 : Return HatchStyle.DashedDownwardDiagonal
Case Is < 8 : Return HatchStyle.DashedHorizontal
Case Is < 9 : Return HatchStyle.DashedUpwardDiagonal
Case Is < 10 : Return HatchStyle.DashedVertical
Case Is < 11 : Return HatchStyle.DiagonalBrick
Case Is < 12 : Return HatchStyle.DiagonalCross
Case Is < 13 : Return HatchStyle.Divot
Case Is < 14 : Return HatchStyle.DottedDiamond
Case Is < 15 : Return HatchStyle.ForwardDiagonal
Case Is < 16 : Return HatchStyle.Horizontal
Case Is < 17 : Return HatchStyle.HorizontalBrick
Case Is < 18 : Return HatchStyle.LargeCheckerBoard
Case Is < 19 : Return HatchStyle.LargeConfetti
Case Is < 20 : Return HatchStyle.LargeGrid
Case Is < 21 : Return HatchStyle.LightDownwardDiagonal
Case Is < 22 : Return HatchStyle.LightHorizontal
Case Is < 23 : Return HatchStyle.LightUpwardDiagonal
Case Is < 24 : Return HatchStyle.LightVertical
Case Is < 25 : Return HatchStyle.DottedGrid
Case Is < 26 : Return HatchStyle.Max
Case Is < 27 : Return HatchStyle.Min
Case Is < 28 : Return HatchStyle.NarrowHorizontal
Case Is < 29 : Return HatchStyle.NarrowVertical
Case Is < 30 : Return HatchStyle.OutlinedDiamond
Case Is < 31 : Return HatchStyle.Percent05
Case Is < 32 : Return HatchStyle.Percent10
Case Is < 33 : Return HatchStyle.Percent20
Case Is < 34 : Return HatchStyle.Percent25
Case Is < 35 : Return HatchStyle.Percent30
Case Is < 36 : Return HatchStyle.Percent40
Case Is < 37 : Return HatchStyle.Percent50
Case Is < 38 : Return HatchStyle.Percent60
Case Is < 39 : Return HatchStyle.Percent70
Case Is < 40 : Return HatchStyle.Percent75
Case Is < 41 : Return HatchStyle.Percent80
Case Is < 42 : Return HatchStyle.Percent90
Case Is < 43 : Return HatchStyle.Plaid
Case Is < 44 : Return HatchStyle.Shingle
Case Is < 45 : Return HatchStyle.SmallCheckerBoard
Case Is < 46 : Return HatchStyle.SmallConfetti
Case Is < 47 : Return HatchStyle.SmallGrid
Case Is < 48 : Return HatchStyle.SolidDiamond
Case Is < 49 : Return HatchStyle.Sphere
Case Is < 50 : Return HatchStyle.ZigZag
Case Is < 51 : Return HatchStyle.Trellis
Case Is < 52 : Return HatchStyle.Vertical
Case Is < 53 : Return HatchStyle.Wave
Case Is < 54 : Return HatchStyle.Weave
Case Is < 55 : Return HatchStyle.WideDownwardDiagonal
Case Is < 56 : Return HatchStyle.WideUpwardDiagonal
End Select
End Function
Private Function GetRandomColor(r) As Color
Return Color.FromArgb(r.Next(0, 256), r.Next(0, 256), r.Next(0,256))
End Function
</script>
Usage
<img src="verify.aspx" />
Real Time Example
Dynamic GDI+ meets CSS
The Code: nav.aspx
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Imaging" %>
<script language="VB" runat="server">
Sub Page_Load(sender as Object, e as EventArgs)
Dim baseMap as Bitmap = new Bitmap(210, 106)
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
Dim upBrush as SolidBrush = new SolidBrush(Color.FromArgb(255,255,255))
Dim downBrush as SolidBrush = new SolidBrush(Color.FromArgb(55,55,0))
Dim fontTitle as Font = new Font("tahoma", 24)
myGraphic.FillRectangle(new SolidBrush(Color.White), 0, 0, 210, 160)
myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 2, 2, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 54, 2, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 106, 2, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.lightblue), 158, 2, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.red), 2, 54, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.yellow), 54, 54, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.green), 106, 54, 50, 50)
myGraphic.FillRectangle(new SolidBrush(Color.blue), 158, 54, 50, 50)
myGraphic.DrawString("1", fontTitle, upBrush, 10, 10)
myGraphic.DrawString("1", fontTitle, downBrush, 10, 60)
myGraphic.DrawString("2", fontTitle, upBrush, 64, 10)
myGraphic.DrawString("2", fontTitle, downBrush, 64, 60)
myGraphic.DrawString("3", fontTitle, upBrush, 116, 10)
myGraphic.DrawString("3", fontTitle, downBrush, 116, 60)
myGraphic.DrawString("4", fontTitle, upBrush, 168, 10)
myGraphic.DrawString("4", fontTitle, downBrush, 168, 60)
Response.ContentType = "image/jpeg"
baseMap.Save(Response.OutputStream, ImageFormat.JPEG)
myGraphic.Dispose()
baseMap.Dispose()
End Sub
</script>
%>The Code 2: nav.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>nav</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">
#iconmenu {
position:relative;
margin:10px auto;
padding:3px;
width:206px;
height:52px;
background:url(pattern.gif)
}
#iconmenu li {
width:50px;
height:50px;
position:absolute;
top:2px;
background:url(nav.aspx) 0 0 no-repeat;
display:block;
list-style:none
}
#iconmenu a {
width:50px;
height:50px;
display:block;
border:solid 1px #fff
}
#iconmenu a:hover {
border:solid 1px #fff
}
#iconmenu #panel1c {
left:2px
}
#iconmenu #panel2c {
left:54px;
background-position:-52px 0
}
#iconmenu #panel3c {
left:106px;
background-position:-106px 0
}
#iconmenu #panel4c {
left:158px;
background-position:-158px 0
}
#iconmenu #panel1c a:hover {
background:url(nav.aspx) -2px -54px no-repeat
}
#iconmenu #panel2c a:hover {
background:url(nav.aspx) -54px -54px no-repeat
}
#iconmenu #panel3c a:hover {
background:url(nav.aspx) -106px -54px no-repeat
}
#iconmenu #panel4c a:hover {
background:url(nav.aspx) -158px -54px no-repeat
}
</style>
</head>
<body>
<ul id="iconmenu">
<li id="panel1c"><a href="#" onClick="alert('ONE');"></a></li>
<li id="panel2c"><a href="#" onClick="alert('TWO');"></a></li>
<li id="panel3c"><a href="#" onClick="alert('THREE');"></a></li>
<li id="panel4c"><a href="#" onClick="alert('FOUR');"></a></li>
</ul>
</body>
</html>
The Result
click hereQuick Watermark
The Code: watermark.aspx
<%@ Page Explicit="True" Language="VB" Debug="True" %>
<%@ Import Namespace="system.drawing" %>
<%@ Import Namespace="system.drawing.imaging" %>
<%@ Import Namespace="system.drawing.drawing2d" %>
<%@ Import Namespace="system.io" %>
<script runat="server">
dim Filename as String
dim Width, Height, shadowSize as Integer
dim Bitmap as system.drawing.bitmap
dim ImgFormat as ImageFormat
dim Img as System.Drawing.Image
Dim baseMap as Bitmap
dim top, left as Integer
sub CreateGraphic()
Dim letterBrush as SolidBrush = new SolidBrush(Color.FromArgb(50, 255, 255, 255))
Dim shadowBrush as SolidBrush = new SolidBrush(Color.FromArgb(50, 0, 0, 0))
Dim fontTitle as Font = new Font("tahoma", 20, FontStyle.Bold)
Filename = Request.QueryString("filename")
Filename = server.mappath(Filename)
ImgFormat = ImageFormat.jpeg : response.contenttype="image/jpeg" ' Default=jpeg '
Img = system.drawing.image.FromFile(Filename)
Width = Img.Width
Height = Img.Height
baseMap = new Bitmap(Width,Height)
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
with myGraphic
.DrawImage(Img, 0,0, Width,Height)
.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
.DrawString("LABS.INSERT-TITLE.COM", fontTitle, shadowBrush, 5, 60)
.DrawString("LABS.INSERT-TITLE.COM", fontTitle, letterBrush, 7, 62)
end with
Img.dispose()
end sub
</script>
<%
CreateGraphic
baseMap.Save(Response.OutputStream, ImageFormat.JPEG)
baseMap.dispose()
Img = Nothing
response.end
%>
</script>
Usage
Example
Quick Dropshadow
The Code: shadow.aspx
<%@ Page Explicit="True" Language="VB" Debug="True" %>
<%@ Import Namespace="system.drawing" %>
<%@ Import Namespace="system.drawing.imaging" %>
<%@ Import Namespace="system.drawing.drawing2d" %>
<%@ Import Namespace="system.io" %>
<script runat="server">
dim Filename as String
dim Width, Height, shadowSize as Integer
dim Bitmap as system.drawing.bitmap
dim Graphix as Graphics
dim ImgFormat as ImageFormat
dim Img as System.Drawing.Image
Dim baseMap as Bitmap
dim top, left as Integer
sub CreateGraphic()
Filename = Request.QueryString("filename")
Filename = server.mappath(Filename)
ImgFormat = ImageFormat.jpeg : response.contenttype="image/jpeg"
Img = system.drawing.image.FromFile(Filename)
Width = Img.Width
Height = Img.Height
shadowSize = 10
baseMap = new Bitmap(Width+shadowSize,Height+shadowSize)
Dim myGraphic as Graphics = Graphics.FromImage(baseMap)
with myGraphic
.FillRectangle(new SolidBrush(Color.white), 0, 0, Width+shadowSize, Height+shadowSize)
.FillRectangle(new SolidBrush(Color.darkgray), 10, 10, Width+shadowSize, Height+shadowSize)
.FillRectangle(new SolidBrush(Color.black), 0, 0, Width+6, Height+6)
.DrawImage(Img, 2,2, Width+2,Height+2)
end with
Img.dispose()
end sub
</script>
<%
CreateGraphic
baseMap.Save(Response.OutputStream, ImageFormat.JPEG)
baseMap.dispose()
Img = Nothing
response.end
%>Usage
<img src="shadow.aspx?filename=FILENAME.JPG" />
Example
