WebMatrix - Using ImageResizer with image upload

Question

i've been looking into the awesome imageresizing.net tool, and am successfully using the URL API on my site.

However, i'm keen to look into the managed API, and resize a photo AS it is uploaded. I have started off by building a very basic upload page that uses the WebImage helper:

@using ImageResizer;

@{  
WebImage photo = null;
var newFileName = "";
var imagePath = "";

if(IsPost){
    photo = WebImage.GetImageFromRequest();
    if(photo != null){
        newFileName = Guid.NewGuid().ToString() + "_" +
            Path.GetFileName(photo.FileName);
        imagePath = @"images\" + newFileName;

        photo.Save(@"~\" + imagePath);
    }
}
}

I want to use the ImageResizing tool in this upload, to resize/crop to a specific size.

Below is the code that i need to insert (i have tested this by running on an existing image, and it works fine):

ImageResizer.ImageBuilder.Current.Build(imagePath,imagePath, 
new ResizeSettings("width=620&height=405&mode=crop"));

Any idea house i can merge the two, and resize BEFORE i save?

I have also copied the suggestion found here stackoverflow.com/questions/14064563/mvc3-imageresizer but when i run the page, i get an error saying "Source may only be an instance of string, VirtualFile, IVirtualBitmapFile, HttpPostedFile, HttpPostedFileBase, Bitmap, Image, or Stream. Parameter name: source" — Gavin5511
– Gavin5511, Commented Jan 17, 2014 at 16:11
Were you giving it a WebImage instance? Don't use WebImage, WebImage is evil. It's also useless/pointless here. Give ImageResizer the upload directly. — Lilith River
– Lilith River, Commented Feb 9, 2014 at 20:36

Justin Beckwith · Accepted Answer · 2014-01-21 08:28:19Z

1

+50

You were so close! Server.MapPath is the missing piece you're looking for.

@{
    if (IsPost) {
        var photo = WebImage.GetImageFromRequest();
        if (photo != null) {
            var filename = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName);
            var localPath = Server.MapPath("~/") + @"images\" + filename;
            photo.Save(localPath);           
            ImageResizer.ImageBuilder.Current.Build(localPath, localPath, new ImageResizer.ResizeSettings("width=620&height=405&mode=crop"));
        }
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    </head>
    <body>
        <form method="post" enctype="multipart/form-data">
            <input type="file" name="mahfile">
            <input type="submit">
        </form>
    </body>
</html>

answered Jan 21, 2014 at 8:28

Justin Beckwith

7,8761 gold badge38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gavin5511 Over a year ago

Thanks dude! Let me set myself up and i'll give it a go!

Gavin5511 Over a year ago

That's worked an absolute treat Justin. It's great to have someone with such rare knowledge on Web Pages, they're few and far between unfortunately.

Gavin5511 Over a year ago

Justin, just one more quick question... Is there any way to convert to jpg on upload too? I've tried using "format=jpg" but it continues to use the format of the uploaded image (eg, if i upload a png or gif)?

Lilith River Over a year ago

Are you sure? The extension won't be changed unless you use ImageJob and set AddFileExtension to true. For security, do NOT let the site visitor determine the file extension (or any part of the destination URL). Also, WebImage isn't safe, and reduces the photo quality. Give ImageResizer the HttpFileUpload object directly.

Collectives™ on Stack Overflow

WebMatrix - Using ImageResizer with image upload

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related