Aarrgghh!!

Web 2.0 Logo Creator

Explanation

I was looking to add a cool new web 2.0 reflection style logo to dynamically created applications in Squidhead. I firgured there had to be a way using <cfimage>. It turns out there is.

Sample Usage

Calling this code will return a fancy web2.0 logo of the current date.

		


1: <cfset text = "#DateFormat(Now(), 'ddd, mmmm d, yyyy')# #TimeFormat(now(),'h:mm:ss TT')#">
2: <cfset baseImage = writeWeb20Logo(text=text, width="600") />

Sample Output

Border is set by page CSS.

Source

web20logo.txt

		


1: <cffunction access="public" name="writeWeb20Logo" output="false" returntype="any" hint="Takes a text string and returns a web 2.0 logo version of it. " >
2: 	<cfargument name="text" type="string" required="yes" hint="The text to write to an image." />
3: 	<cfargument name="width" type="numeric" default="500" hint="The width of the output image." />
4: 	<cfargument name="height" type="numeric" default="75" hint="The height of the output image." />
5: 	<cfargument name="imageType" type="string" required="no" default="rgb" hint="The cfimage type of the image." />
6: 	<cfargument name="canvasColor" type="string" required="no" default="##FFFFFF" hint="The hex color of the image background." />
7: 	<cfargument name="textColor" type="string" required="no" default="##000000" hint="The hex color of the text color." />
8: 	<cfargument name="textX" type="numeric" required="no" default="10" hint="The x position of the text." />
9: 	<cfargument name="texty" type="numeric" required="no" default="30" hint="The y position of the text." />
10: 	<cfargument name="fontStruct" type="any" required="no" default="" hint="The settings of the font for the text." />
11: 
12: 	<cfset var baseImage = imageNew("", arguments.width, arguments.height, arguments.imageType, arguments.canvasColor) />
13: 	<cfset var reflectionImage = imageNew("", arguments.width, arguments.height, arguments.imageType, arguments.canvasColor) />
14: 	<cfset var reflectionImageInfo = StructNew() />
15: 	<cfset var i =0 />
16: 	<cfset var percentage = 0 />
17: 	<cfset var iinc = 0 />
18: 
19: 
20: 	<!--- Maybe Ben Nadel will have an issue with this.  It is kinda unassertive.  Oh well, he won't read this.' --->
21: 	<cfif not isStruct(fontStruct)>
22: 		<cfset arguments.fontStruct= StructNew() />
23: 		<cfset arguments.fontStruct.font= "Arial" />
24: 		<cfset arguments.fontStruct.size= "30" />
25: 		<cfset arguments.fontStruct.style= "bold" />
26: 		<cfset arguments.fontStruct.strikethrough = "no" />
27: 		<cfset arguments.fontStruct.underline = "no" />
28: 	</cfif>
29: 
30: 	<!--- Create the base image with the text phrase --->
31: 	<cfset ImageSetAntialiasing(baseImage, "ON") />
32: 	<cfset ImageSetDrawingColor(baseImage, arguments.textColor) />
33: 	<cfset ImageDrawText(baseImage, arguments.text, arguments.textX, arguments.textY, arguments.fontStruct) />
34: 
35: 	<!--- Write the reflection image. --->
36: 	<cfset ImageSetAntialiasing(reflectionImage, "ON") />
37: 	<cfset ImageSetDrawingTransparency (reflectionImage, 80) />
38: 	<cfset ImageSetDrawingColor(reflectionImage, arguments.textColor) />
39: 	<cfset ImageDrawText(reflectionImage, arguments.text, arguments.textX, arguments.textY, arguments.fontStruct) />
40: 	<cfset ImageFlip(reflectionImage, "vertical") />
41: 
42: 	<!--- Distort it a bit. --->
43: 	<cfset ImageShear(reflectionImage,.05,"horizontal", "bicubic")>
44: 	<cfset ImageResize(reflectionImage,"100%","40%","highestQuality",2)>
45: 
46: 	<!--- Get some measurements  --->
47: 	<cfset reflectionImageInfo = ImageInfo(reflectionImage)>
48: 	<!--- Trim the leading deadspace. --->
49: 	<cfset ImageCrop(reflectionImage, 0, .25 * arguments.height,  reflectionImageInfo.width, Round(reflectionImageInfo.height * .9) )>
50: 
51: 	<cfset reflectionImageInfo = ImageInfo(reflectionImage)>
52: 
53: 	<!--- Now we're going to overlay lines that get more and more opaque to simulate a fade.' --->
54: 	<!--- Algorithm here modified from http://www.jonhartmann.com/programming/index.cfm/2007/8/14/CFImage-Effects --->
55: 	<!--- Thanks CFJon --->
56: 	<cfset ImageSetDrawingColor(reflectionImage, arguments.canvasColor) />
57: 	<cfset iInc = 50/reflectionImageInfo.height />
58: 
59: 	<cfloop index="i" from="1" to="#reflectionImageInfo.height#">
60: 		<cfset percentage = 100 -round(iInc*i*2.5)>
61: 
62: 		<cfif percentage lt 0>
63: 			<cfset percentage = 0 />
64: 		</cfif>
65: 
66: 		<cfset ImageSetDrawingTransparency(reflectionImage, percentage) />
67: 	    <cfset ImageDrawLine(reflectionImage, 0, i, reflectionImageInfo.width, i) />
68: 	</cfloop>
69: 
70: 	<!--- Over lay the top image back on the original image. --->
71: 	<cfset ImagePaste(baseImage, reflectionImage, 0, arguments.textY + 10) />
72: 
73: 
74: 	<cfreturn baseImage />
75: </cffunction>

Thanks

I couldn not have done this without the example at CFjon. He has a really good gradient fade example there.