CODEWITHSUNDEEP
c#asp.netimagefilethumbnails
prawn
prawn

Reputation: 2653

Convert image to thumbnail and save it

I have a file input in asp.net. I want to get the image, display the thumbnail, and save it. Here is the aspx...

form id="form1" runat="server" enctype="multipart/form-data">
<div>
    <input type="file" runat="server" />
    <br />
    <asp:Button runat="server" ID="btn_upload" OnClick="btn_upload_Click" Text="Upload" />
    <br />
    <asp:Image ID="image_placeholder" runat="server" Visible="false" />
</div>
</form>

And here is the c# code behind. I can get the image to display, I just have difficulty saving it. 

var postedFile = httpRequest.Files[file];
            string fileName = postedFile.FileName;

            if (fileName != "")
            {
                Stream fs = postedFile.InputStream;

                System.Drawing.Image image = System.Drawing.Image.FromStream(fs);

                using (System.Drawing.Image thumbnail = image.GetThumbnailImage(100, 100, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero))
                {
                    using (MemoryStream memoryStream = new MemoryStream())
                    {
                        thumbnail.Save(memoryStream, ImageFormat.Png);
                        Byte[] bytes2 = new Byte[memoryStream.Length];
                        memoryStream.Position = 0;
                        memoryStream.Read(bytes2, 0, (int)bytes2.Length);
                        string base64String = Convert.ToBase64String(bytes2, 0, bytes2.Length);
                        image_placeholder.ImageUrl = "data:image/png;base64," + base64String;
                        image_placeholder.Visible = true;
                        var desktopFolder = Environment.GetFolderPath(Environment.SpecialFolder.DesktopDirectory);
                        thumbnail.Save(desktopFolder, System.Drawing.Imaging.ImageFormat.Png);
                    }
                }

The error I get is "A generic error ocurred in GDI+" I take it this is because I'm calling two thumbnail.Save

Anyways, the image displays fine, it is just problematic when it comes to actually saving it.

Upvotes: 0

Views: 3862

Answers (2)

timbck2
timbck2

Reputation: 1066

I recently had to write a small application to generate thumbnail images from PDF files. I ended up using a library based on ImageMagick called Magick.NET.This library made it very easy to do what you're describing. I used the method MagickImage.Resize() to resize the image to thumbnail size, the property MagickImage.Format to set the thumbnail's image format, and the method MagickImage.Write() to write the thumbnail to disk. You might want to check it out at https://magick.codeplex.com/.

Upvotes: 1

Vignesh Kumar A
Vignesh Kumar A

Reputation: 28403

Use a 3rd party library here http://imageresizer.codeplex.com/. I struggled with the uploading of images and retaining quality, this library helped me out alot.

In your view:

@model YourProject.ViewModels.ProductImageUploadCreateViewModel
@using (Html.BeginForm("Upload", "ProductImage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
     <input type="file" name="ImageFile1" id="ImageFile1">
}

Your controller:

public class ProductImageController : Controller { [HttpPost] public ActionResult Upload(ProductImageUploadCreateViewModel viewModel) { if (!ModelState.IsValid) { return View(viewModel); }

      if (viewModel.ImageFile1 != null)
      {
           UploadImage(viewModel.ProductId, "1", viewModel.ImageFile1);
      }

      // Return to where ever...
 }

} Your upload method:

private void UploadImage(int productId, string imageNo, HttpPostedFileBase imageFile) { string uploadPath = Server.MapPath("~/Assets/Images/Products/" + productId); if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); }

 Dictionary<string, string> versions = new Dictionary<string, string>();
 versions.Add("_m", "width=150&height=150&scale=both&format=jpg");  // Medium size

 string filePrefix = productId + "_" + imageNo;
 versions.Add("_s", "width=90&height=90&scale=both&format=jpg");  // Small size
 versions.Add("_l", "width=300&height=300&scale=both&format=jpg");  // Large size

 foreach (string fileSuffix in versions.Keys)
 {
      // Generate a filename
      string fileName = Path.Combine(uploadPath, filePrefix + fileSuffix);

      // Let the image builder add the correct extension based on the output file type
      fileName = ImageBuilder.Current.Build(imageFile, fileName, new ResizeSettings(versions[fileSuffix]), false, true);
 }

} Have a look on their website, there are a couple of samples that you can work through. I hope this helps :)

Upvotes: 0

Related Questions