The Coldfusion gradient fill with corners

Can u show the exact color codes you used ie the values of:  #form.imagebtm#  and  #form.imagetop#

u can use two colors: one black and one white..
no matter what colors used here

Quick solution: use ImageFlip(img,"vertical") to turn the image upside down :-)

I'm not 100% sure if this will do what you want (either) ... if not, try adjusting the ImagDrawRoundRect parameters ...

(This code was written without the aid of a coldfusion server to test with, so buyer-beware ...)

<!--- Steps is the number of steps --->
<cfset bgcolor="ffffff">
<cfset fgcolor="000000">
<cfset height=500>
<cfset width=500>
<cfset arc=50>
 
<!--- arc is defined in diameter, but we need arc/2 steps --->
<cfset arc=round(arc/2)> 
<!--- defined colorBG as decimal array of bgcolor --->
<cfset colorBG=ListToArray("#InputBaseN(left(bgcolor,2))#,#InputBaseN(mid(bgcolor,2,2),16)#,#InputBaseN(right(bgcolor,2),16)#")>
<!--- create delta --->
<cfset delta=ListToArary("#(InputBaseN(left(fgcolor,2))-colorA1[1])/arc#,#(InputBaseN(mid(fgcolor,2,2),16)-colorA1[2])/arc#,#(InputBaseN(right(fgcolor,2),16)-colorA1[3])/arc#")>
 
<cfset img=ImageNew("",width,height,"rgb",bgcolor)>
<cfset ImageSetAntialiasing(img,"on")>
<cfset ImageSetBackgroundColor(myImage,bgcolor) />
<!--- img.getwidth() and img.getheight() are builtin functions --->
<cfset ImageClearRect(img,0,0,img.getwidth(),img.getheight())>
 
<cfloop from="#arc#" to="1" index="i" step="-1">
    <cfset thiscolor="#round(listgetat(colorBG[1],1)+i*delta[1])#,#round(colorBG[2]+i*delta[2])#,#round(colorBG[3]+i*delta[3])#">
    <cfset ImageSetDrawingColor(img,thiscolor) />
<!--- Draw a rectangle with rounded corners. --->
    <cfset ImageDrawRoundRect(img,arc-i,arc-i,img.width()-i*2, img.height()-i*2,i*2,i*2,true)>
    <cfset ImageSetBackgroundColor(img,thiscolor) />
</cfloop>
<!--- now fill in the bottom corners :-) --->
<cfset ImageSetDrawingColor(img,fgcolor) />
<cfset ImageDrawRect(img,0,0,img.width(),img.height()/2,true)

Select allOpen in new window

error in:
 Parameter validation error for the INPUTBASEN function.
The function takes 2 parameters.
 
The error occurred in C:\Inetpub\wwwroot\educationconsultant\example.cfm: line 11

9 : <cfset arc=round(arc/2)> 
10 : <!--- defined colorBG as decimal array of bgcolor --->
11 : <cfset colorBG=ListToArray("#InputBaseN(left(bgcolor,2))#,#InputBaseN(mid(bgcolor,2,2),16)#,#InputBaseN(right(bgcolor,2),16)#")>
12 : <!--- create delta --->
13 : <cfset delta=ListToArary("#(InputBaseN(left(fgcolor,2))-colorA1[1])/arc#,#(InputBaseN(mid(fgcolor,2,2),16)-colorA1[2])/arc#,#(InputBaseN(right(fgcolor,2),16)-colorA1[3])/arc#")>

11 : <cfset colorBG=ListToArray("#InputBaseN(left(bgcolor,2),16)#,#InputBaseN(mid(bgcolor,2,2),16)#,#InputBaseN(right(bgcolor,2),16)#")>

now this error:
Parameter validation error for the INPUTBASEN function. 
The function takes 2 parameters. 
 
The error occurred in C:\Inetpub\wwwroot\educationconsultant\example.cfm: line 13
11 : <cfset colorBG=ListToArray("#InputBaseN(left(bgcolor,2),16)#,#InputBaseN(mid(bgcolor,2,2),16)#,#InputBaseN(right(bgcolor,2),16)#")>
12 : <!--- create delta --->
13 : <cfset delta=ListToArary("#(InputBaseN(left(fgcolor,2))-colorA1[1])/arc#,#(InputBaseN(mid(fgcolor,2,2),16)-colorA1[2])/arc#,#(InputBaseN(right(fgcolor,2),16)-colorA1[3])/arc#")>
14 :  
15 : <cfset img=ImageNew("",width,height,"rgb",bgcolor)>

just got this in my RSS reader:

http://www.jonhartmann.com/index.cfm/2009/4/4/Transparent-Rounded-Corners-for-the-Masses

you will need to create your gradient-filled rect first, then pass it to this cfc to add rounded corners to it.

Azadi

Thanks Azadi for this link, i modified it but it gave a simple green color image as i chosen two colors [green, red], it just output the rectaangle rather than making it round
i have added this code:
<cfif isDefined('form.makeround') AND form.makeround EQ 1>
                    <cffunction name="ImageRoundedCorners" returntype="any" output="no" verifyclient="yes">
                        <cfargument name="img" type="any" required="true" />
                        <cfargument name="archeight" type="numeric" required="false" default="0" />
                        <cfargument name="arcwidth" type="numeric" required="false" default="0" />
                        
                        <cfset var local = StructNew() />
                        
                        <!--- Initialize java classes --->
                        <cfset local.BufferedImage = CreateObject("java", "java.awt.image.BufferedImage") />
                        <cfset local.RoundRectangle2D = CreateObject("java", "java.awt.geom.RoundRectangle2D$Float") />
                        
                        <!--- Get Information to pull width and height --->
                        <cfset local.info = ImageInfo(arguments.img) />
                        
                        <!--- Create a new transparent image the correct size --->
                        <cfset local.newImage = local.BufferedImage.init(
                            local.info.width, 
                            local.info.height, 
                            local.BufferedImage.TYPE_INT_ARGB
                        ) />
                        
                        <!--- Create the rounded corner clipping mask --->
                        <cfset local.clippingMask = local.RoundRectangle2D.init(
                            JavaCast("float", 0),
                            JavaCast("float", 0),
                            JavaCast("float", local.info.width),
                            JavaCast("float", local.info.height),
                            JavaCast("float", arguments.archeight),
                            JavaCast("float", arguments.arcwidth)            
                        ) />
                        
                        <!--- Get the graphics object --->
                        <cfset local.graphics = local.newImage.createGraphics() />
                        
                        <!--- Set the clipping mask --->
                        <cfset local.graphics.clip(local.clippingMask) />
                        
                        <!--- Draw the original image over the old one --->
                        <cfset local.graphics.drawImage(
                            ImageGetBufferedImage(arguments.img),
                            0,
                            0,
                            JavaCast("null", "")        
                        ) />
                    
                        <!--- Convert the image and return it --->
                        <cfreturn ImageNew(local.newImage) />
                    </cffunction>
                          <cfset img = ImageRoundedCorners(img, 25, 25) />    
                    <cfelse>
                            <cfset ImageDrawRect(img, 0, 0, x, y, "true")>
                    </cfif>    


while my full code is this below:

<cfset color_1=#form.imagebtm#> 
            <!--- this is the color of the pixel at the top --->
            <cfset color_2=#form.imagetop#> 
            <!--- this is the dimensions of the image --->
            <cfset width=200>
            <cfset height=30>
            <!--- fade = 1 (height) or 0 (width) --->
            <cfset fade=1> 
            <!--- gif = 1 (gif) or 0 (jpg) --->
            <cfset gif=1>
            <!--- this converts the colors from hex representation to a decimal list --->
            <cfset color_1="#inputBaseN(left(color_1,2),16)#,#inputBaseN(mid(color_1,3,2),16)#,#inputBaseN(right(color_1,2),16)#">
            <cfset color_2="#inputBaseN(left(color_2,2),16)#,#inputBaseN(mid(color_2,3,2),16)#,#inputBaseN(right(color_2,2),16)#">
            <!--- Create Object "img" ... "" = Source Img, width, height, "rgb" = colors will be defined by RGB Mode, color_1) --->
            <cfset img=ImageNew("",width,height,"rgb",color_1)>
            <!--- Calculate number of steps available, (max 255) GIF only support 256 colors max --->
            <cfif fade>
                    <cfset steps=iif(gif and height gt 256,'255','height')-1> 
            <cfelse>
                    <cfset steps=iif(gif and width gt 256,'255','width')-1> 
            </cfif>
            <!--- an array of the change rates ... --->
            <cfset delta=ListToArray("#(listgetat(color_2,1)-listgetat(color_1,1))/steps#,#(listgetat(color_2,2)-listgetat(color_1,2))/steps#,#(listgetat(color_2,3)-listgetat(color_1,3))/steps#")>
            <!--- Set drawing color --->
            <cfset ImageSetDrawingColor(img, color_1)>
            <!--- Draw rectangle at co-ordinates 0,0 with width=#width# and height=#round(listgetat(delta(4))#, filled=true --->
            <cfset ImageDrawRect(img, 0, 0, width, height, "true")>
            <!--- Create a temporary Array to hold current values, prefilled with start data --->
            <cfset temp=ListToArray(color_1)>
            <!--- loop the steps ... --->
            <cfloop from="#steps#" to="1" index="row" step="-1">
                    <!--- update the temporary array, with the step change data --->
                    <cfloop from="1" to="3" index="i"> 
                        <cfset temp[i]=temp[i]+delta[i]>
                    </cfloop>
                    <!--- define the size of the rectangle --->
                    <cfset x=iif(fade,'width','ceiling(row*width/steps)')>
                    <cfset y=iif(fade,'ceiling(row*height/steps)','height')>
                    
                    <!--- Set the drawing color (rounding the values to the nearset integer, since they have to be integers) --->
                <cfset ImageSetDrawingColor(img, "#round(temp[1])#,#round(temp[2])#,#round(temp[3])#")>
                    <!--- Draw a rectangle from (0,0) sized (x,y) (again, rounding to prevent breakage) --->
                    <cfif isDefined('form.makeround') AND form.makeround EQ 1>
                    <cffunction name="ImageRoundedCorners" returntype="any" output="no" verifyclient="yes">
                        <cfargument name="img" type="any" required="true" />
                        <cfargument name="archeight" type="numeric" required="false" default="0" />
                        <cfargument name="arcwidth" type="numeric" required="false" default="0" />
                        
                        <cfset var local = StructNew() />
                        
                        <!--- Initialize java classes --->
                        <cfset local.BufferedImage = CreateObject("java", "java.awt.image.BufferedImage") />
                        <cfset local.RoundRectangle2D = CreateObject("java", "java.awt.geom.RoundRectangle2D$Float") />
                        
                        <!--- Get Information to pull width and height --->
                        <cfset local.info = ImageInfo(arguments.img) />
                        
                        <!--- Create a new transparent image the correct size --->
                        <cfset local.newImage = local.BufferedImage.init(
                            local.info.width, 
                            local.info.height, 
                            local.BufferedImage.TYPE_INT_ARGB
                        ) />
                        
                        <!--- Create the rounded corner clipping mask --->
                        <cfset local.clippingMask = local.RoundRectangle2D.init(
                            JavaCast("float", 0),
                            JavaCast("float", 0),
                            JavaCast("float", local.info.width),
                            JavaCast("float", local.info.height),
                            JavaCast("float", arguments.archeight),
                            JavaCast("float", arguments.arcwidth)            
                        ) />
                        
                        <!--- Get the graphics object --->
                        <cfset local.graphics = local.newImage.createGraphics() />
                        
                        <!--- Set the clipping mask --->
                        <cfset local.graphics.clip(local.clippingMask) />
                        
                        <!--- Draw the original image over the old one --->
                        <cfset local.graphics.drawImage(
                            ImageGetBufferedImage(arguments.img),
                            0,
                            0,
                            JavaCast("null", "")        
                        ) />
                    
                        <!--- Convert the image and return it --->
                        <cfreturn ImageNew(local.newImage) />
                    </cffunction>
                    	<cfset img = ImageRoundedCorners(img, 25, 25) />    
                    <cfelse>
                		<cfset ImageDrawRect(img, 0, 0, x, y, "true")>
                    </cfif>    
            </cfloop>
<cfimage action="writetobrowser" source="#img#" />

Select allOpen in new window

rect-01.gif

that function does NOT draw the image for you  - you need to pass it the image you want to apply rounded corners to. so you need to draw your gradient-filled rectangle first, then pass that image to the function and it will return your gradient-filled rectangle with rounded corners.

your code should be something like this the attached.

Azadi

<cffunction name="ImageRoundedCorners" returntype="any" output="no" verifyclient="yes">
		<cfargument name="img" type="any" required="true" />
		<cfargument name="archeight" type="numeric" required="false" default="0" />
		<cfargument name="arcwidth" type="numeric" required="false" default="0" />
		
		<cfset var local = StructNew() />
		
		<!--- Initialize java classes --->
		<cfset local.BufferedImage = CreateObject("java", "java.awt.image.BufferedImage") />
		<cfset local.RoundRectangle2D = CreateObject("java", "java.awt.geom.RoundRectangle2D$Float") />
		
		<!--- Get Information to pull width and height --->
		<cfset local.info = ImageInfo(arguments.img) />
		
		<!--- Create a new transparent image the correct size --->
		<cfset local.newImage = local.BufferedImage.init(
				local.info.width, 
				local.info.height, 
				local.BufferedImage.TYPE_INT_ARGB
		) />
		
		<!--- Create the rounded corner clipping mask --->
		<cfset local.clippingMask = local.RoundRectangle2D.init(
				JavaCast("float", 0),
				JavaCast("float", 0),
				JavaCast("float", local.info.width),
				JavaCast("float", local.info.height),
				JavaCast("float", arguments.archeight),
				JavaCast("float", arguments.arcwidth)            
		) />
		
		<!--- Get the graphics object --->
		<cfset local.graphics = local.newImage.createGraphics() />
		
		<!--- Set the clipping mask --->
		<cfset local.graphics.clip(local.clippingMask) />
		
		<!--- Draw the original image over the old one --->
		<cfset local.graphics.drawImage(
				ImageGetBufferedImage(arguments.img),
				0,
				0,
				JavaCast("null", "")        
		) />
 
		<!--- Convert the image and return it --->
		<cfreturn ImageNew(local.newImage) />
</cffunction>
<!------>
<!------>
<cfset color_1=#form.imagebtm#> 
<!--- this is the color of the pixel at the top --->
<cfset color_2=#form.imagetop#> 
<!--- this is the dimensions of the image --->
<cfset width=200>
<cfset height=30>
<!--- fade = 1 (height) or 0 (width) --->
<cfset fade=1> 
<!--- gif = 1 (gif) or 0 (jpg) --->
<cfset gif=1>
<!--- this converts the colors from hex representation to a decimal list --->
<cfset color_1="#inputBaseN(left(color_1,2),16)#,#inputBaseN(mid(color_1,3,2),16)#,#inputBaseN(right(color_1,2),16)#">
<cfset color_2="#inputBaseN(left(color_2,2),16)#,#inputBaseN(mid(color_2,3,2),16)#,#inputBaseN(right(color_2,2),16)#">
<!--- Create Object "img" ... "" = Source Img, width, height, "rgb" = colors will be defined by RGB Mode, color_1) --->
<cfset img=ImageNew("",width,height,"rgb",color_1)>
<!--- Calculate number of steps available, (max 255) GIF only support 256 colors max --->
<cfif fade>
				<cfset steps=iif(gif and height gt 256,'255','height')-1> 
<cfelse>
				<cfset steps=iif(gif and width gt 256,'255','width')-1> 
</cfif>
<!--- an array of the change rates ... --->
<cfset delta=ListToArray("#(listgetat(color_2,1)-listgetat(color_1,1))/steps#,#(listgetat(color_2,2)-listgetat(color_1,2))/steps#,#(listgetat(color_2,3)-listgetat(color_1,3))/steps#")>
<!--- Set drawing color --->
<cfset ImageSetDrawingColor(img, color_1)>
<!--- Draw rectangle at co-ordinates 0,0 with width=#width# and height=#round(listgetat(delta(4))#, filled=true --->
<cfset ImageDrawRect(img, 0, 0, width, height, "true")>
<!--- Create a temporary Array to hold current values, prefilled with start data --->
<cfset temp=ListToArray(color_1)>
<!--- loop the steps ... --->
<cfloop from="#steps#" to="1" index="row" step="-1">
	<!--- update the temporary array, with the step change data --->
	<cfloop from="1" to="3" index="i"> 
			<cfset temp[i]=temp[i]+delta[i]>
	</cfloop>
	<!--- define the size of the rectangle --->
	<cfset x=iif(fade,'width','ceiling(row*width/steps)')>
	<cfset y=iif(fade,'ceiling(row*height/steps)','height')>
	<!--- Set the drawing color (rounding the values to the nearset integer, since they have to be integers) --->
	<cfset ImageSetDrawingColor(img, "#round(temp[1])#,#round(temp[2])#,#round(temp[3])#")>
	<!--- Draw a rectangle from (0,0) sized (x,y) (again, rounding to prevent breakage) --->
	<cfset ImageDrawRect(img, 0, 0, x, y, "true")>
</cfloop>
<!------>
<cfif isDefined('form.makeround') AND form.makeround EQ 1>
	<cfset img = ImageRoundedCorners(img, 25, 25) />    
</cfif>    
<!------>
<cfimage action="writetobrowser" source="#img#" />

Select allOpen in new window

13 : <cfset delta=ListToArary("#(InputBaseN(left(fgcolor,2),16)-colorA1[1])/arc#,#(InputBaseN(mid(fgcolor,2,2),16)-colorA1[2])/arc#,#(InputBaseN(right(fgcolor,2),16)-colorA1[3])/arc#")>

here's the image created by the code i posted:

Azadi
round1.png

Thanks But with your code. it get round but with some problem:

• Fills the background color with the first color
• makes rounded but does not workable as background is filled in

file attached check it

rect-01.gif

Found the bloody error i am having
what i ran the exact code u provide worked pretty well.
when i tried to store in the file folder:
like this i ran into trouble:
<cfset filename='rect_01'>
<cfset ImageWrite(img, "#filename#.#iif(gif,'"gif"','"jpg"')#")>


well i do not why it colored the first color black and then overwrite the rounded image over it.
Do u know

did some trick:
I solved this, What i was trying was generating the gif files. so i just made it to convert to png and it worked.

well gif does not play good with coldfusion
now what it did now is:

• if i tend not to generate the corners, it still generates the corner either i select it or not.

Thing i changed

• cfset png=1>
• <cfif fade>
        <cfset steps=iif(png and height gt 256,'255','height')-1>
        <cfelse>
        <cfset steps=iif(png and width gt 256,'255','width')-1>
      </cfif>
  
• but all worked.

i posted here because it worked as i wanted.
only worked with PNG no other format.

• 
  
  

Thanks

here's a post-points bonus for you:

A MUCH BETTER PNG WITH ROUNDED CORNERS (but works only with PNG output...)

credits go to and code from (slightly modified to allow to pass cf image object to the function, and not just image path string):
http://cfsearching.blogspot.com/2007/12/creating-png-images-with-rounded.html

just use attached code for the ImageRoundedCorners function.

Azadi

PS: you can also explore cfSearching's posts on creating transparent GIF files, if you are interested:

http://cfsearching.blogspot.com/2007/12/create-and-resize-transparent-gif.html
http://cfsearching.blogspot.com/2008/01/creating-transparent-gifs-with_13.html

<cffunction name="ImageRoundedCorners" returntype="any" access="public" output="false">
   <cfargument name="source" type="any" required="true" hint="image object or full path to source image">
   <cfargument name="arcWidth" type="numeric" required="true" hint="horizontal diameter of the rounded corners">
   <cfargument name="arcHeight" type="numeric" required="true" hint="vertical diameter of the rounded corners">
   <cfscript>
       var Local = structNew();
       // cfSearching: create required java objects
       Local.Color = createObject("java", "java.awt.Color");
       Local.AlphaComposite = createObject("java", "java.awt.AlphaComposite");
       Local.BufferedImage = createObject("java", "java.awt.image.BufferedImage");
       Local.RenderingHints = createObject("java", "java.awt.RenderingHints");
       Local.sourceImage = ImageGetBufferedImage(ImageNew(arguments.source));
       Local.width  = Local.sourceImage.getWidth();
       Local.height = Local.sourceImage.getHeight();
       // cfSearching: create a bufferedImage to hold the mask
       Local.Mask = Local.BufferedImage.init( javacast("int", Local.width),
               javacast("int", Local.height),
               Local.BufferedImage.TYPE_INT_ARGB
           );
       Local.graphics = Local.Mask.createGraphics();
       // cfSearching: use anti-aliasing for smoother edges
       Local.graphics.setRenderingHint( Local.RenderingHints.KEY_ANTIALIASING,
               Local.RenderingHints.VALUE_ANTIALIAS_ON
           );
       // cfSearching: create a rounded rectangle mask
       Local.graphics.setColor( Local.Color.WHITE );
       Local.graphics.fillRoundRect(javacast("double", 0),
               javacast("double", 0),
               javacast("double", Local.width),
               javacast("double", Local.height),
               javacast("double", arguments.arcWidth),
               javacast("double", arguments.arcHeight)
           );
       // cfSeaching: draw the source image onto the mask
       Local.graphics.setComposite( Local.AlphaComposite.SrcIn );
       Local.graphics.drawImage( Local.sourceImage,
               javacast("int", 0),
               javacast("int", 0),
               javacast("null", "")
           );
       Local.graphics.dispose();
   </cfscript>
   <cfreturn ImageNew(Local.Mask)>
</cffunction>

Select allOpen in new window