Solved

The Coldfusion gradient fill with corners

Posted on 2009-04-02
17
615 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
  • 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 15

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
 
LVL 15

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 15

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 15

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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 15

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 500 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 15

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 15

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 15

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
need some regex help 15 25
Reverse Proxy Server 6 70
Apache SSL and mod_rewrite not working 8 106
System Analysis 5 41
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. 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 :…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

747 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now