Dynamic recrop of images

So this e-commerce site I'm doing has thousands of images. Some unfortunately were non-square and then placed centered on a white background, even if the predominant colors were darker. Going through all of these would be a nightmare production task.

I wondered if I could programmatically detect these rectangular white regions, and replace them with a better chosen color. The problem is that some of the images are really on a white background, centered and shouldn't be touched.

I've written some code that comes in diagonally until it detects a pixel that isn't white is the next pixel. I then check a vertical and horizontal line from that point. If one direction is all white, I assume that it is a rectangular region. Same from the bottom right corner coming up.

If one of these checks fail in both directions I bail. If I detect different orientations on the top and the bottom I bail. But if I detect horizontal or vertical stripes of white I then step in one pixel from all four "corners" and then average the color values. I then use this color to fill the white regions.

I know that certain shapes (peanut like) can screw up this calculation. Still the color chosen for the fill in that circumstance will be decent (and only fill white regions). Also some of the images have dithered edges, possibly throwing off the calculation. Still this seems to work pretty well.

Click here to see what I'm talking about. The first three images are a diagram of how the code looks at various images. The next items are the full size image, image resized (with border) without this dynamic cropping applied, and image resized with dynamic cropping applied.

Simple font renderer

Alright, I've gotten some requests for the actual code to render fonts and so I've made a zip with a simple project in it. This will work fine for simple things, but I recommend using the javascript trick I reference in another post to not hurt search rankings. text.zip

Animate

I've seen things about using javascript to "animate" pngs/jpgs by creating a "strip" of images and then changing positioning in a reference to one.

I thought I could do something with this, and use some on the fly server image creation. I let you set three values and then the server creates the strip as an animation of the drawing of the bars.

http://drop.3203.com/graph.htm

Optimizing rendered image

I realized the png I render the text to will end up with color matching issues (I've found this in general with some pngs).

I found a cool way to have it render a gif with an optimized palette using some code from Morgan Skinner who wrote an article “Optimizing Color Quantization for ASP.NET Images”.

Add this dll to your references:

ImageManipulation.dll

now with "using ImageManipulation;"

you can change the line textImage.Save(memStream, System.Drawing.Imaging.ImageFormat.Png); in the code I wrote earlier to:

OctreeQuantizer quantizer = new OctreeQuantizer(255, 8);
Bitmap quantized = quantizer.Quantize(textImage);
Response.ContentType = "image/gif";
quantized.Save(memStream, ImageFormat.Gif);


You can see this working on here. The titles in the orange and brown boxes are images.