Create an 'iPhone style icon' effect on a thumbnail image?

Question

Hello all,

I have an image upload facility in my asp.net project, when uploaded a thumbnail of the image is generated and saved to disk.

What I would ideally like to do is apply some nice styling effects to this thumbnail image.. similar to the look of the icons on an iPhone.. perhaps a slight gradient, smooth rounded corners, and a border.

Hopefully someone will be aware of an existing library to do this? - commercial or otherwise (that would save me delving too far into the .net GDI space!).

Any pointers greatly received. Thanks.

Answer 1

A thought: what about creating a .png with a gradient to sit over an existing image?

Answer 2

Create Graphics with larger size. then put your original image with draw method to the expected coordinate. And Draw other Bitmap or Image loaded from file or generated in the memory. For reflection you can use ready algorithms or use GetPixel method implement it yourself

Answer 3

As this is for the web, I would strongly suggest not trying to incorporate the PNG with the original at the time of upload. Your best bet is to do any sizing of the image etc. at upload, then where the image is used throughout your site/application, you float an absolutely positioned PNG over the top. The PNG will have it's 4 corners curved as you see fit and the drop shadow applied as you wish.

If the image is of an underterminate size when you are displaying it, you can do a "portal" or "cut-out", by using overflow:hidden;.

To demonstrate;

You image is 500 x 500. You want an icon of 100 x 100. If you re-size by HTML it'll look a mess, so place down div, add background-image of your 500 x 500 image and overflow:hidden; with width:100px;height:100px;. Then create another div, apply position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;, within this place your transparent PNG.

Then on your page;

<div style="background-image:url('/images/thumbnail.jpg');width:100px;height:100px;overflow:hidden;z-index:1;">
    <div style="position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;">
        <a href="/ifclickable.htm"><img src="/images/transparent.png" alt="alt for img here" /></a>
    </div>
</div>

This will then mean your icon cannot be broken and all you have to worry about is the re-size on your upload.

Hope that helps.