I found an interesting ColdFusion component in an article on a Brazilian site written by Pedro Claudio Silva, who has authorized me to translate it into English. This component helps you to generate or modify images by using the CFIMAGE functions supplied with CF8.
The methods in this component are:
* ImageBin
* ImageReflection
* ImageGradient
* Text2Image
* ImageShadow
* ImageRounded

Here is a test template: imageTest.cfm
<cfscript>
imagePath = expandPath("images/image.jpg");
targetPath = expandPath("temp/");
obj = createObject("component", "imageTreat");
//rounded corner image
myImage = imageNew(imagePath);
round = obj.imageRounded(image=myImage, offset=20);
imageWrite(round, targetPath & "round.jpg");
//mirror image
myImage = imageNew(imagePath);
mirror = obj.ImageReflection(myImage);
imageWrite(mirror, targetPath & "mirror.jpg");
//drop shadow
myImage = imageNew(imagePath);
shadow = obj.ImageShadow(myImage);
imageWrite(shadow, targetPath & "shadow.jpg");
//gradient
myImage = imageNew(imagePath);
gradient = obj.ImageGradient(myImage);
imageWrite(gradient, targetPath & "gradient.jpg");
//text to image
myImage = imageNew(imagePath);
text = obj.text2Image(text="MY TEXT HERE", backgroundColor="##FFFF33",textColor="##FF0000",size=30,width=250);
imageWrite(text, targetPath & "text.jpg");
</cfscript>

And here is the CFC: imageTreat.cfc
<cfcomponent>
<!--- ImageBin: Test the variable type to asure it is either an image path or an image type variable --->
<cffunction name="ImageBin" returntype="any">
<cfargument name="image" type="any" required=yes hint="image path or image variable" />
<cfargument name="width" type="numeric" required="false" default="150" hint="used only to create images in this method" />
<cfargument name="height" type="numeric" required="false" default="50" hint="used only to create images in this method" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" hint="used only to create images in this method" />
<cfscript>
// if object is not image type
if(NOT IsImage(Arguments.image)){
// if object is a image file
if(isImageFile(Arguments.image)){
return ImageRead(Arguments.image); // read image file and return binary data
}
return imageNew("", Arguments.width, Arguments.height, "rgb", Arguments.backgroundColor); // create image and return binary data
}
return Arguments.image; // return image binary data
</cfscript>
</cffunction>
<!--- ImageReflection: Create a reflection of the image --->
<cffunction name="ImageReflection" returntype="any">
<cfargument name="image" type="any" required="true" hint="Image path or image type variable" />
<cfargument name="position" type="boolean" required="false" default="false" hint="if it will have reflection or not" />
<cfargument name="right" type="boolean" required="false" default="true" hint="Reverse the reflection direction" />
<cfargument name="gdirection" type="boolean" required="false" default="false" hint="Reverse the gradient direction" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" hint="Background color of the reflection" />
<cfscript>
var img1 = ImageBin(Arguments.image); // load variable with image binary data
var Copy = ImageCopy(img1, 0, 0, img1.width, img1.height); // generate a copy of the image
var img = ImageNew("", img1.width*2.17, img1.height*2, "rgb", Arguments.backgroundColor); // create reflection background image
var x = 0;
var direction = 1.4;
var width = img1.width;
var height = img.height*.7;
// if reflection is over the image, change image initial position
if(Not Arguments.right and Arguments.position){
direction *=-1;
x = img.width - img1.width;
}
ImageFlip(Copy, "vertical"); // mirror view
ImageCrop(Copy, 0, 0, img1.width, Round(img1.height * .85)); // cut 85% from image height
Copy = ImageGradient(Copy,Arguments.gdirection,false,1,100,Arguments.backgroundColor); // apply gradient on image
ImagePaste(img,img1,x,0); // join original image with reflection
ImageSetDrawingTransparency(img,45); // apply transparency to the union result
//aplica cor de fundo na imagem unida
ImageSetBackgroundColor(Copy,Arguments.backgroundColor); // apply background color to the result
if(Arguments.position){
ImageShear(Copy,direction,"horizontal", "bicubic"); // transform image
ImageResize(Copy,"100%","50%","MEDIUMQUALITY",2); // resize image
width = img.width;
height = img.height *.71;
}else{
ImageResize(Copy,"100%","70%","MEDIUMQUALITY",2); // resize image
}
ImagePaste(img,Copy, 0,img1.height); // join modified image with reflection
ImageCrop(img, 0,0,width,height); // crop the image to the correct dimensions
return img;
</cfscript>
</cffunction>
<!--- ImmageGradient: Applies gradient on image --->
<cffunction name="ImageGradient" returntype="any">
<cfargument name="image" type="any" required="true" hint="Image path or image type variable" />
<cfargument name="direction" type="boolean" required="false" default="false" hint="Gradient direction (vertical/horizontal)" />
<cfargument name="position" type="boolean" required="false" default="false" hint="Gradient start position" />
<cfargument name="limit" type="numeric" required="false" default="1" hint="Gradient thickness" />
<cfargument name="index" type="numeric" required="false" default="100" hint="Alpha" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" hint="Gradient color" />
<cfscript>
var img = ImageBin(Arguments.image); // load variable with image binary data
var h = img.height*Arguments.limit; // limits gradient end to the limit (%) specified
var w = img.width;
var i = Arguments.index/h; // divide alpha into lines according to the height
var per = 0;
var k = 0;
var j = 0;
//Verify gradient direction argument
if(Arguments.direction){
h = w*Arguments.limit; // change gradient direction
i = Arguments.index/h;
}
ImageSetDrawingColor(img, Arguments.backgroundColor); // apply gradient color
// for each line (of 100) in the index argument, apply a different transparency
for(;k lte h;k++){
j = k;
if(Arguments.position) j = h-k; // correct number according to the position, small difference
per = 100 - round(i*j*(1.8*Arguments.limit)); // calculate the current transparency percentual
if(per lt 0) per = 0; // correct percentual
ImageSetDrawingTransparency(img, per); // apply transparency
// verify gradient direction
if(Arguments.direction){
ImageDrawLine(img, k, 0, k,img.height); // make gradient visible, starting from the right
}else{
ImageDrawLine(img, 0, k, img.width, k); // male gradient visible, starting from the left;
}
}
return img;
</cfscript>
</cffunction>
<!--- Text2Image: Applies text on image --->
<cffunction name="Text2Image" returntype="any">
<cfargument name="text" type="string" required="false" default="teste" hint="Text to be applied" />
<cfargument name="img" type="any" required="false" default="" hint="Image path or image type variable" />
<cfargument name="width" type="numeric" required="false" default="150" />
<cfargument name="height" type="numeric" required="false" default="50" />
<cfargument name="x" type="numeric" required="false" default="10" />
<cfargument name="y" type="numeric" required="false" default="25" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" />
<cfargument name="textColor" type="string" required="false" default="##000000" />
<cfargument name="font" type="string" required="false" default="Trebuchet MS" />
<cfargument name="size" type="numeric" required="false" default="25" />
<cfargument name="style" type="string" required="false" default="bold" />
<cfargument name="strikethrough" type="boolean" required="false" default="false" />
<cfargument name="underline" type="boolean" required="false" default="false" />
<cfscript>
var image = ImageBin(Arguments.img,Arguments.width, Arguments.height, Arguments.backgroundColor); // load variable with image binary data
var Styles = StructNew();
Styles.font = Arguments.font; // font family
Styles.size = Arguments.size; // font size
Styles.style = Arguments.style; // font weight
Styles.strikethrough = Arguments.strikethrough; // font decoration : strike
Styles.underline = Arguments.underline; // font decoration : underline
ImageSetAntialiasing(image, "ON"); // prepare image to receive the text
ImageSetDrawingColor(image, Arguments.textColor); // set text color
ImageDrawText(image, Arguments.text, Arguments.x, Arguments.y, Styles); // apply text on image
return image;
</cfscript>
</cffunction>
<!--- ImageShadow: Applies shadow on image --->
<cffunction name="ImageShadow" returnType="any">
<cfargument name="image" type="any" required="true" hint="Image path or image type variable" />
<cfargument name="position" type="numeric" required="false" default="1" hint="Shadow side" />
<cfargument name="offset" type="numeric" required="false" default="1.5" hint="Shadow offset" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" hint="Shadow thickness" />
<cfargument name="shadow" type="string" required="false" default="##A0A0A0" hint="Shadow color" />
<cfargument name="blur" type="numeric" required="false" default="10" hint="Blur intensity" />
<cfscript>
var i = 2*Arguments.offset;
var img = ImageBin(arguments.image); // load variable with image binary data
var img1 = "";
// verify shadow direction
if(Arguments.position){
img1 = ImageBin(",img.width + i,img.height + i,Arguments.backgroundColor); // generate shadow dimensions to make it visible
}else{
//cria imagem com com dimensões para tornar sombra visivel
img1 = ImageBin(",img.width + (i*2),img.height + (i*2),Arguments.backgroundColor); // crete image with enought dimensions to make shadow visible
}
ImageSetDrawingColor(img1,Arguments.shadow); // apply shadow color on created image
// verify which side the shadow will be applied
switch(Arguments.position){
case 1:
ImageDrawRect(img1, Arguments.offset, Arguments.offset, img.width, img.height, "true"); // create shadow
ImageBlur(img1,Arguments.blur); // apply blur
ImagePaste(img1,img,0,0); // join the images
break;
case 2:
ImageDrawRect(img1, Arguments.offset, 0, img.width, img.height, "true"); // create shadow
ImageBlur(img1,Arguments.blur); // apply blur
ImagePaste(img1,img,0,Arguments.offset); // join images
break;
case 3:
ImageDrawRect(img1, 0, 0, img.width, img.height, "true"); // create shadow
ImageBlur(img1,Arguments.blur); // apply blur
ImagePaste(img1,img,Arguments.offset,Arguments.offset); // join images
break;
case 4:
ImageDrawRect(img1, 0, Arguments.offset, img.width, img.height, "true"); // create shadow
ImageBlur(img1,Arguments.blur); // apply blur
ImagePaste(img1,img,Arguments.offset,0); // join images
break;
}
return img1;
</cfscript>
</cffunction>
<!--- ImageRounded: Generates image with rounded corners --->
<cffunction name="ImageRounded" returntype="any">
<cfargument name="image" type="any" required="true" hint="Image path or image type variable" />
<cfargument name="backgroundColor" type="string" required="false" default="##FFFFFF" hint="Gradient color" />
<cfargument name="offset" type="numeric" required="false" default="10" hint="Offset" />
<cfscript>
var img = ImageBin(arguments.image); // load variable with image binary data
var i = 0;
var index = Arguments.offset; // corners degree
ImageSetDrawingColor(img,Arguments.backgroundColor); // background color
ImageSetAntialiasing(img,"ON"); // prepare image
// apply curved line according to the degree
for(i=0;i lte index;i++){
ImageDrawQuadraticCurve(img, i, 0, i/(index/2), i/(index/2), 0, i);
ImageDrawQuadraticCurve(img, img.width-i, 0, img.width-i/(index/2), i/(index/2),img.width, i);
ImageDrawQuadraticCurve(img, 0, img.height-(index-i), (index-i)/(index/2), img.height-((index-i)/(index/2)), (index-i),img.height);
ImageDrawQuadraticCurve(img, img.width, img.height-(index-i), img.width-((index-i)/(index/2)), img.height-((index-i)/(index/2)), img.width-(index-i),img.height);
}
return img;
</cfscript>
</cffunction>
</cfcomponent>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.