I'm trying to create a thumbnail using MVC3's WebImage helper.
The original image is a .png with a transparent background. When I try and resize it with the following:
var image = blob.DownloadByteArray(); new WebImage(image) .Resize(50, 50) .Write(); The resulting thumbnail replaces the original transparent background with a black background.
This above answer is great but i did some fine-tuning and implemented the "keep ratio" of the image so that we don't end up with stretched images.
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Web.Helpers; public static class ResizePng { private static IDictionary<string, ImageFormat> _transparencyFormats = new Dictionary<string, ImageFormat>(StringComparer.OrdinalIgnoreCase) { { "png", ImageFormat.Png }, { "gif", ImageFormat.Gif } }; public static WebImage ResizePreserveTransparency(this WebImage image, int width, int height) { ImageFormat format = null; if (!_transparencyFormats.TryGetValue(image.ImageFormat, out format)) { return image.Resize(width, height); } //keep ratio ************************************* double ratio = (double)image.Width / image.Height; double desiredRatio = (double)width / height; if (ratio > desiredRatio) { height = Convert.ToInt32(width / ratio); } if (ratio < desiredRatio) { width = Convert.ToInt32(height * ratio); } //************************************************ using (Image resizedImage = new Bitmap(width, height)) { using (Bitmap source = new Bitmap(new MemoryStream(image.GetBytes()))) { using (Graphics g = Graphics.FromImage(resizedImage)) { g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.DrawImage(source, 0, 0, width, height); } } using (MemoryStream ms = new MemoryStream()) { resizedImage.Save(ms, format); return new WebImage(ms.ToArray()); } } } }
You should write you own resize method for gif and png images. I have created extension for Web Image for resizing images. See the code of my method below:
public static class WebImageExtension { private static readonly IDictionary<string, ImageFormat> TransparencyFormats = new Dictionary<string, ImageFormat>(StringComparer.OrdinalIgnoreCase) {{"png", ImageFormat.Png}, {"gif", ImageFormat.Gif}}; public static WebImage Resize(this WebImage image, int width) { double aspectRatio = (double)image.Width / image.Height; var height = Convert.ToInt32(width/aspectRatio); ImageFormat format; if (!TransparencyFormats.TryGetValue(image.ImageFormat.ToLower(), out format)) { return image.Resize(width, height); } using (Image resizedImage = new Bitmap(width, height)) { using (var source = new Bitmap(new MemoryStream(image.GetBytes()))) { using (Graphics g = Graphics.FromImage(resizedImage)) { g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.DrawImage(source, 0, 0, width, height); } } using (var ms = new MemoryStream()) { resizedImage.Save(ms, format); return new WebImage(ms.ToArray()); } } } } You should alter the .Write to pass your expected output type. It uses this passed type to determine what type of image to use.
var image = blob.DownloadByteArray(); new WebImage(image) .Resize(50, 50) .Write("png");