6
votes

I created a function to allow uploaded transparent .png files to be inserted into a SQL Server database and the displayed on a web page via an HttpHandler.

While this all works, the png transparency changes to black when it's viewed on the web page. Is there a way of preserving the transparency?

Here's my image service which inserts into the database from the MVC controller:

public void AddImage(int productId, string caption, byte[] bytesOriginal)
{
    string jpgpattern = ".jpg|.JPG";
    string pngpattern = ".png|.PNG";
    string pattern = jpgpattern;

    ImageFormat imgFormat = ImageFormat.Jpeg;

    if (caption.ToLower().EndsWith(".png"))
    {
    imgFormat = ImageFormat.Png;
    pattern = pngpattern;
    }

    ProductImage productImage = new ProductImage();
    productImage.ProductId = productId;
    productImage.BytesOriginal = bytesOriginal;
    productImage.BytesFull = Helpers.ResizeImageFile(bytesOriginal, 600, imgFormat);
    productImage.BytesPoster = Helpers.ResizeImageFile(bytesOriginal, 198, imgFormat);
    productImage.BytesThumb = Helpers.ResizeImageFile(bytesOriginal, 100, imgFormat);
    productImage.Caption = Common.RegexReplace(caption, pattern, "");

    productImageDao.Insert(productImage);
}

And here's the "ResizeImageFile" helper function:

public static byte[] ResizeImageFile(byte[] imageFile, int targetSize, ImageFormat imageFormat)
{
    using (System.Drawing.Image oldImage = System.Drawing.Image.FromStream(new MemoryStream(imageFile)))
    {
        Size newSize = CalculateDimensions(oldImage.Size, targetSize);
        using (Bitmap newImage = new Bitmap(newSize.Width, newSize.Height, PixelFormat.Format24bppRgb))
        {
            using (Graphics canvas = Graphics.FromImage(newImage))
            {
            canvas.SmoothingMode = SmoothingMode.AntiAlias;
            canvas.InterpolationMode = InterpolationMode.HighQualityBicubic;
            canvas.PixelOffsetMode = PixelOffsetMode.HighQuality;
            canvas.DrawImage(oldImage, new Rectangle(new Point(0, 0), newSize));
            MemoryStream m = new MemoryStream();
            newImage.Save(m, imageFormat);
            return m.GetBuffer();
            }
        }
    }
}

What do I need to do to preserve the png transparency? Please show examples. I'm seriously not an expert with image manipulation.

Thanks.

2
Try using Format32bppArgb to preserve alpha (that's 'A').Matthew Flaschen
Please avoid prefixing your question titles with "C#" or similar. That is what the tags are for.M.Babcock
Do you know if your original .png is 8 bit, or is it full color?Mark Ransom
Matthew, that did it! Thanks.Kahanu
Mark, I don't know, but Matthew comment was the answer.Kahanu

2 Answers

5
votes

Maybe try changing pixel format form PixelFormat.Format24bppRgb to PixelFormat.Format32bppRgb. You need the extra 8 bits to hold the alpha channel.

3
votes

Using PixelFormat.Format32bppRgb didn't work for me. What worked however is using oldImage.PixelFormat when drawing the new image. So the corresponding line of code becomes:

using (Bitmap newImage = new Bitmap(newSize.Width, newSize.Height, oldImage.PixelFormat))