Solved

The Coldfusion gradient fill with corners

Posted on 2009-04-02
17
619 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
site launch date and last modified date 3 82
change time in cron 4 67
exchange 2010 turning off 3des ciphers 2 121
setup wamp server for first time 2 44
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. 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 : Go t…

920 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

16 Experts available now in Live!

Get 1:1 Help Now