?
Solved

The Coldfusion gradient fill with corners

Posted on 2009-04-02
17
Medium Priority
?
639 Views
Last Modified: 2013-12-24
One of the experts provided me a solution to get a gradiert fill in a image:

here below is the code changed little bit as i am looking to change the image to have rounded corners on top both on left and right
But they are appearing at the bottom, i will attach the image here
<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 arcHeight = 50>
                                        <cfset arcWidth = 50>
                    <cfset ImageSetAntialiasing(img,"on")>
                                        <cfset ImageDrawRoundRect(img, 0, 0, x, y, arcWidth, arcHeight, "yes")>
                        <!---<cfset ImageDrawRect(img, 0, 0, x, y, "true")>--->
            </cfloop>

Open in new window

rect-01.gif
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
  • +1
17 Comments
 
LVL 19

Expert Comment

by:Jones911
ID: 24053647
Can u show the exact color codes you used ie the values of:  #form.imagebtm#  and  #form.imagetop#
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24056362
u can use two colors: one black and one white..
no matter what colors used here
0
 
LVL 2

Expert Comment

by:albrandwood
ID: 24058905
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)

Open in new window

0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24058982
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#")>



0
 
LVL 2

Expert Comment

by:albrandwood
ID: 24063088
11 : <cfset colorBG=ListToArray("#InputBaseN(left(bgcolor,2),16)#,#InputBaseN(mid(bgcolor,2,2),16)#,#InputBaseN(right(bgcolor,2),16)#")>
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24065921
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)>


0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24066946
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24067185
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#" />

Open in new window

rect-01.gif
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24067253
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#" />

Open in new window

0
 
LVL 2

Expert Comment

by:albrandwood
ID: 24067256
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#")>
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24067279
here's the image created by the code i posted:

Azadi
round1.png
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24067328
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
0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 2000 total points
ID: 24067528
that is weird, because the image i posted was created with THAT EXACT CODE. in my local code i just have 3 extra lines at the top of the code:
<cfset form.makeround = 1>
<cfset color_1="000000">
<cfset color_2="990000">

so... you either have some more code which you did not post and which interferes with image creation, or maybe your java version is outdated... i am using java version 1.6.0_10 in my cf8 installation - it is NOT the default version that comes with cf (i had upgraded it - highly recommended, btw). so java version could be at play here, but i have no ability to test it...

*REQUEST TO OTHER EXPERTS*
if any of you is running cf8 with default java - could you test attached code and see if it renders the image correctly or not, please?
see the red-black rounded corners png file in one of my previous posts for the image sample.
run attached code to test. Thanks.

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 form.makeround = 1>
<cfset color_1="000000"> 
<!--- this is the color of the pixel at the top --->
<cfset color_2="990000"> 
<!--- 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#" />

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24067648
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
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 24067873
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.


0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 31565896
Thanks
0
 
LVL 27

Expert Comment

by:azadisaryev
ID: 24067919
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>

Open in new window

0

Featured Post

Create the perfect environment for any meeting

You might have a modern environment with all sorts of high-tech equipment, but what makes it worthwhile is how you seamlessly bring together the presentation with audio, video and lighting. The ATEN Control System provides integrated control and system automation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
Suggested Courses
Course of the Month14 days, 12 hours left to enroll

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question