CFImage Effects

I know that Foundeo has created an Image Effects CFC that can do image gradients and the "iTunes" mirroring effect, but while I was sitting at home today with a bit of a cold, I just had to make this effect myself. Unfortunately, I figured out in the process that I needed a gradient effect while I was creating this function, so they are both here. All in all, not too hard. I realized that the iTunesMirror function should be tacking on a boarder to the non-reflection, but I think it works well enough as is.

Gradient Mask


<cffunction name="gradientMask">
        <cfargument name="image" type="Any"/>
        <cfargument name="color" type="string" required="false" default="black"/>
        <cfscript>
            var strInfo = ImageInfo(arguments.image);
            var iInc = 50/strInfo.height;
            var i = 0;
            
            ImageFlip(arguments.image, "vertical");
            
            ImageSetDrawingColor(arguments.image, arguments.color);
            
            for (i = 0; i lte (strInfo.height-1); i = i + 1) {
                ImageSetDrawingTransparency(arguments.image, round(iInc*i*2));
                ImageDrawLine(arguments.image, 0, i, strInfo.width, i);
                
            }
            
            ImageFlip(arguments.image, "vertical");
            
            return arguments.image;
        </cfscript>
        
    </cffunction>

iTunes Mirror


<cffunction name="iTunesMirror">
        <cfargument name="image" type="any"/>
        <cfargument name="color" type="string" required="false" default="black"/>
        <cfscript>
            var imgCopy = arguments.image;
            var strInfo = ImageInfo(imgCopy);
            var imgNew = ImageNew("", strInfo.width, strInfo.height*1.4, "rgb", arguments.color);
            var imgPart = "";
        
            ImageFlip(imgCopy, "vertical");
            imgPart = ImageCopy(imgCopy, 0, 0, strInfo.width, strInfo.height*.4);
            
            GradientMask(imgPart, arguments.color);
    
            ImageFlip(imgCopy, "vertical");
    
            ImagePaste(imgNew, arguments.image, 0, 0);
            ImageSetDrawingTransparency(imgNew, 40);
            ImagePaste(imgNew, imgPart, 0, strInfo.height);
        
            return imgNew;
        </cfscript>
    </cffunction>

Executing Functions


<cfscript>
        imgNew = ImageRead("20600678_XXL.jpg");
        ImageResize(imgNew, 150, 150);
        imgNew = iTunesMirror(imgNew, "white");
    </cfscript>
    <cfimage action="write" destination="mirror1.jpg" source="#imgNew#" quality="1" overwrite="true">
    <cfimage action="writeToBrowser" source="#imgNew#" />

 

Comments

Add Comment
KJ's Gravatar Thanks for the example, this is great!
  • Link
  • Posted By KJ
  • 12/11/07 11:51 AM
clen markusy's Gravatar Thanks for the good example.

*we don't need no stinking spam links*
  • Link
  • Posted By clen markusy
  • 5/20/08 10:32 AM
Add Comment
Jon in Chicago, July 2008

I'm Jon Hartmann and I'm a C# .Net developer by day, a ColdFusion guru by night, and all around Javascript fanatic. Stay right here to read my technical posts as I grapple with mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web. Learn more about me.

Post a job. Find one. authenticjobs.com

Interested in becoming a sponsor? Contact me.