resize images library? Options
desmo
Posted: Wednesday, September 20, 2006 5:55:58 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 144
Location: NYC
Hi all,

I need to dynamically resize images and was thinking of doing
a library that would do the following:

1) Look for the resized image (image75x75.jpg for example).

2) If the resized image doesn't exist, look for the full
size image, resize it, save it, and load it.

3) If the resized image does exist, load it.

3) Right now, I need to resize proportionally so aspect
ratio stays the same.

It would take 3 parameters:

a) file path
b) height
c) width

Has anyone done this? If not, I'm going to attempt.

Thank you!

- Mark



Manhattan Heavy Industries

“Algorithms are small but beautiful”, Dr. Karp observed.
Pawel
Posted: Wednesday, September 20, 2006 6:31:01 PM
Rank: Enthusiast

Joined: 7/19/2006
Posts: 13
I've done something like that recently. It's rough and dirty but does the trick. No time for making it a stand alone thing so just gonna post the code here:

Code:

public class SomeClass
{

public static string GetImageLargeThumbnail(string ImagePath)
        {
            string _fullFilePath = System.Web.HttpContext.Current.Server.MapPath(umbraco.GlobalSettings.Path + "/.." + ImagePath);
            string ext = System.IO.Path.GetExtension(_fullFilePath);
            string fileNameThumb = _fullFilePath.Replace(ext, "_thumblarge.jpg");

            if (!File.Exists(fileNameThumb))
            {

                using (System.Drawing.Image image = System.Drawing.Image.FromFile(_fullFilePath))
                {
                    CreateThumbnail(image, 201, 112, fileNameThumb);
                }
                System.Web.HttpContext.Current.Trace.Write("Created a thumbnail sucessfully");
            }

            return ImagePath.Replace(System.IO.Path.GetExtension(ImagePath), "_thumblarge.jpg");
        }

        private static void CreateThumbnail(Image image, int descWidth, int descHeight, string thumbFileName)
        {
                    using (Bitmap thumbnail = new Bitmap(descWidth, descHeight))
                    {
                        thumbnail.SetResolution(image.HorizontalResolution, image.VerticalResolution);

                        Graphics g = Graphics.FromImage(thumbnail);
                        g.InterpolationMode = InterpolationMode.HighQualityBicubic;

                        g.DrawImage(image,
                            new Rectangle(0, 0, descWidth, descHeight),
                            new Rectangle(0, 0, image.Width, image.Height),
                            GraphicsUnit.Pixel);

                        g.Dispose();

                        thumbnail.Save(thumbFileName, ImageFormat.Jpeg);
                    }
        }
}


The code is provided on a do-what-you-want-with-it-no-biggie licence :D
Pawel
Posted: Wednesday, September 20, 2006 6:42:53 PM
Rank: Enthusiast

Joined: 7/19/2006
Posts: 13
:hrm: ehhh that didn't go right... no experiance in pasting code...
no idea why that didn't work :hmm:
cpalm
Posted: Wednesday, September 20, 2006 6:44:44 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 154
There was posted something in the old yahoo mailinglist...
I can upload the zip file (pdf documentation and files) tomorrow

It is a really nice image library, that can handle gif, jpgs, quality output, text over image, caching to disk etc.

CPalm, www.cpalm.dk
drobar
Posted: Wednesday, September 20, 2006 7:20:01 PM

Rank: Umbracoholic

Joined: 9/8/2006
Posts: 1,082
Location: KY, USA
Here's the latest version of ImageGen (v.1.3) along with all the documentation. ImageGen will do everything you asked for and much more. The new location for the download is here:
http://www.percipientstudios.com/downloads/umbraco/ImageGen1.3.zip

Can someone update the wiki, RTK, and any other sites that might have listed the old version? Thanks!

I believe Niels has/is putting the bulk of the source code for ImageGen in the next version of Umbraco, but I don't know when it might appear and if it will have all the features (or if he'll add features!)

I used ImageGen extensively on http://www.veracross.com to make graphical page titles on every page and to do all the screenshots in the flipbooks.


cheers,
doug.

MVP 2007/2008 - Official Umbraco Trainer for North America - Percipient Studios
desmo
Posted: Wednesday, September 20, 2006 8:01:48 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 144
Location: NYC
Wow! Thanks, Doug! You just saved me a bunch of time!!:thumbup: :thumbup:

I've been looking at Umbraco since May, and I've somehow never seen this before...

- Mark

Manhattan Heavy Industries

“Algorithms are small but beautiful”, Dr. Karp observed.
desmo
Posted: Wednesday, September 20, 2006 8:27:56 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 144
Location: NYC
A related function that I'm looking at would be the ability to crop dynamically generated images so you can fit several together with tighter spacing. Like this:

http://www.suissegarantie.ch/art/bilder/logos/logo_text/logo_text.jpg

Is the amount of space around a character of a given size obtainable? Theoretically controllable?

Thanks again, Doug (and everyone else who replied)!

- Mark

Manhattan Heavy Industries

“Algorithms are small but beautiful”, Dr. Karp observed.
drobar
Posted: Wednesday, September 20, 2006 9:26:10 PM

Rank: Umbracoholic

Joined: 9/8/2006
Posts: 1,082
Location: KY, USA
Hey, Mark,

Glad you like ImageGen! I put a ton of effort into it and it is nice that others get to benefit from it too. ImageGen can create all the normal kinds of text graphics you would want, but it isn't a high-end tool so there is no kerning, leading, etc. Use Illustrator for that kind of control. For now, that is probably the solution to your question.

In general, though, I don't think Crop would be a very useful feature for ImageGen. It would be difficult for users to get just right result by specifying pixel dimensions in ImageGen. And rarely do you just want to see the center or one edge of an image so automatic cropping probably isn't a good idea either. No, I think cropping is probably best left to graphics programs like Photoshop. Once the original master image has been created, ImageGen can do the rest.

Here's an idea, though... what about a CropBgColor parameter that would look for the BgColor in your generated image. It would then trim back any edge that contained only that color until a different color were found. This would be most useful for text, obviously. Might that be a solution? If so, I'll put that on the To Do list for version 1.4.


cheers,
doug.




MVP 2007/2008 - Official Umbraco Trainer for North America - Percipient Studios
desmo
Posted: Wednesday, September 20, 2006 9:53:43 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 144
Location: NYC
Doug,

Thanks for all the information. I will abandon my cropping aspirations. Your idea of a CropBgColor param seems very interesting. I'll keep an eye out for that one!:D

- Mark

If I could figure out how to do a .sig, this would be it::!:

"You meet the nicest people on the Umbraco Forum!"

Manhattan Heavy Industries

“Algorithms are small but beautiful”, Dr. Karp observed.
drobar
Posted: Wednesday, September 20, 2006 10:12:17 PM

Rank: Umbracoholic

Joined: 9/8/2006
Posts: 1,082
Location: KY, USA
On the main forum homepage, click the Edit Profile link (second down, on the right).

MVP 2007/2008 - Official Umbraco Trainer for North America - Percipient Studios
desmo
Posted: Wednesday, September 20, 2006 10:23:05 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 144
Location: NYC
:blush:

Manhattan Heavy Industries

“Algorithms are small but beautiful”, Dr. Karp observed.
cpalm
Posted: Wednesday, September 20, 2006 10:39:38 PM

Rank: Aficionado

Joined: 7/19/2006
Posts: 154
Hi Douglas

I really love your work, could you share the source? (I would like to save the cached image elsewhere)

Regards
Christian

CPalm, www.cpalm.dk
Gregorius
Posted: Thursday, September 21, 2006 3:48:12 AM

Rank: Aficionado

Joined: 7/29/2006
Posts: 491
Location: Melbourne, Australia
Awesome, thanks Doug.. i haven't come across this either and thought i'd found all the extensions out there.

full documentation too - wow! i love it :)

Sometimes when I'm alone, I google myself...
cpalm
Posted: Thursday, September 21, 2006 9:35:50 AM

Rank: Aficionado

Joined: 7/19/2006
Posts: 154
Greg wrote:

Awesome, thanks Doug.. i haven't come across this either and thought i'd found all the extensions out there.

full documentation too - wow! i love it :)


Yeah, it's hard to find, maybe it should be on the extensions page

Any way, I use it to generate my text graphics @ http://www.cpalm.dk/

CPalm, www.cpalm.dk
hohios
Posted: Thursday, September 21, 2006 10:34:42 AM
Rank: Devotee

Joined: 7/22/2006
Posts: 61
Location: Heraklion Crete
true imageGen is great.
I use it on http://marisguide.joywebservice.com a project that havent finished yet.
every image you can see there, is resised.

Implemented in a macro with width, height, custom class, custom style, popup js, if pad, etc.
warren
Posted: Thursday, September 21, 2006 10:55:50 AM

Rank: Addict

Joined: 7/19/2006
Posts: 584
Location: Leigh-on-Sea, Essex, UK
Maybe Niels could implment this in the Rich Text editor for the stable verison of umbraco3 as opposed to the beta.
As he has loads on his plate !!

Just read the documentation, looks shit hot!! :thumbup:
Just got find time to implment it and use it.

Warren :)

Warren Buckley - Umbraco MVP 07 & certified level 1 developer | Creative Web Specialist - Warren Buckley's Blog
warren
Posted: Thursday, September 21, 2006 4:57:41 PM

Rank: Addict

Joined: 7/19/2006
Posts: 584
Location: Leigh-on-Sea, Essex, UK
Hello Douglas,

Could you give me some help with your ImageResize script.
If you look on this page you will see the text has slight padding, which I do not want, as I want the header to line up with the main body text.

My url is as follows

http://umbraco.momo.co.uk/

http://umbraco.momo.co.uk/umbraco/ImageGen.aspx?text=Page Header&FontColor=831F59&FontSize=22&Pad=False&width=650&height=40



Cheers,
Warren

Warren Buckley - Umbraco MVP 07 & certified level 1 developer | Creative Web Specialist - Warren Buckley's Blog
drobar
Posted: Thursday, September 21, 2006 8:29:59 PM

Rank: Umbracoholic

Joined: 9/8/2006
Posts: 1,082
Location: KY, USA
Hi, Warren,

I understand. Unfortunately, this is the way fonts are rendered in .NET. I handled it on one of my sites in which I needed a precise left edge placement by using the following CSS

Code:

#maincontent .title {
margin-left: -3px;
border: 0;
}


Adjust the margin as necessary for your font and fontsize.

cheers,
doug.


MVP 2007/2008 - Official Umbraco Trainer for North America - Percipient Studios
Gregorius
Posted: Friday, September 22, 2006 5:03:06 AM

Rank: Aficionado

Joined: 7/29/2006
Posts: 491
Location: Melbourne, Australia
This looks very cool, and will definitely solve a problem i was about to encounter.

Just one question: is there a way to tell ImageGen to resize an image, only if it will reduce the size? (ie: do not render image larger than original, so if original image is 50x100px, and resize set to 200px height, just display original image instead) ?

Sometimes when I'm alone, I google myself...
drobar
Posted: Friday, September 22, 2006 2:15:05 PM

Rank: Umbracoholic

Joined: 9/8/2006
Posts: 1,082
Location: KY, USA
ImageGen does not check the original size vs. the requested size. If you want to scale an image up a little (or a lot) ImageGen will do it for you.

cheers,
doug.

MVP 2007/2008 - Official Umbraco Trainer for North America - Percipient Studios
Users browsing this topic
Guest


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.