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

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
Misty's Gravatar Hi John,

I added a Transpose Level to the function but else it works on vertical, horizontal, 180 degree but it does notwork for 270 degree, here is added a few tweeks:

<cffunction name="gradientMask">
<cfargument name="image" type="Any"/>
<cfargument name="color" type="string" required="false" default="black"/>
<cfargument name="reflection2transposeLevels" type="any" default="vertical" required="yes">
<cfscript>
   var strInfo = ImageInfo(arguments.image);
   var iInc = 50/strInfo.height;
   var i = 0;
   ImageFlip(arguments.image, "#arguments.reflection2transposeLevels#");
   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, "#arguments.reflection2transposeLevels#");
   return arguments.image;
</cfscript>
</cffunction>
<cffunction name="MirrorReflection">
<cfargument name="image" type="any"/>
<cfargument name="color" type="string" required="false" default="black"/>
<cfargument name="reflection2transposeLevels" type="any" default="vertical" required="yes">
<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, "#arguments.reflection2transposeLevels#");
   imgPart = ImageCopy(imgCopy, 0, 0, strInfo.width, strInfo.height*.4);
   GradientMask(imgPart, arguments.color);
   ImageFlip(imgCopy, "#arguments.reflection2transposeLevels#");
   ImagePaste(imgNew, arguments.image, 0, 0);
   ImageSetDrawingTransparency(imgNew, 40);
   ImagePaste(imgNew, imgPart, 0, strInfo.height);
   return imgNew;
</cfscript>
</cffunction>
  • Link
  • Posted By Misty
  • 7/21/13 6:35 AM
Comments are not allowed for this entry.
Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.