CODEWITHSUNDEEP
c#image-processingimagefilter
amiry jd
amiry jd

Reputation: 27603

Bluring images in C# just as google plus does

I'm trying to add a blur filter to my images using this snippet:

    public static Bitmap DoBlur(this Bitmap image, Int32 blurSize) {
        var rectangle = new Rectangle(0, 0, image.Width, image.Height);
        Bitmap blurred = new Bitmap(image.Width, image.Height);

        // make an exact copy of the bitmap provided
        using (Graphics graphics = Graphics.FromImage(blurred))
            graphics.DrawImage(image, new Rectangle(0, 0, image.Width, image.Height),
                new Rectangle(0, 0, image.Width, image.Height), GraphicsUnit.Pixel);

        // look at every pixel in the blur rectangle
        for (Int32 xx = rectangle.X; xx < rectangle.X + rectangle.Width; xx++) {
            for (Int32 yy = rectangle.Y; yy < rectangle.Y + rectangle.Height; yy++) {
                Int32 avgR = 0, avgG = 0, avgB = 0;
                Int32 blurPixelCount = 0;

                // average the color of the red, green and blue for each pixel in the
                // blur size while making sure you don't go outside the image bounds
                for (Int32 x = xx; (x < xx + blurSize && x < image.Width); x++) {
                    for (Int32 y = yy; (y < yy + blurSize && y < image.Height); y++) {
                        Color pixel = blurred.GetPixel(x, y);

                        avgR += pixel.R;
                        avgG += pixel.G;
                        avgB += pixel.B;

                        blurPixelCount++;
                    }
                }

                avgR = avgR / blurPixelCount;
                avgG = avgG / blurPixelCount;
                avgB = avgB / blurPixelCount;

                // now that we know the average for the blur size, set each pixel to that color
                for (Int32 x = xx; x < xx + blurSize && x < image.Width && x < rectangle.Width; x++)
                    for (Int32 y = yy; y < yy + blurSize && y < image.Height && y < rectangle.Height; y++)
                        blurred.SetPixel(x, y, Color.FromArgb(avgR, avgG, avgB));
            }
        }
        return blurred;
    }

which I found in the Internet of-course. I'm trying to blur an image to be like this:

enter image description here

which is blured by google plus as a page cover. But the best result I can get it something like this:

enter image description here

As you can see I'm not even closed! Do you have any idea what filter google is using? Or how can I achieve that?

This is the original which I'm testing on it:

enter image description here

Upvotes: 2

Views: 888

Answers (2)

Reed Copsey
Reed Copsey

Reputation: 564831

The main problem is you're blurring the pixel with pixels to the left and below the source, but not to the right and top.

Try changing your inner loop to:

for (Int32 x = Math.Max(0, xx - blurSize); x <= Math.Min(xx + blurSize, image.Width-1); x++) 
{
    for (Int32 y = Math.Max(0, yy - blurSize); y <= Math.Min(yy + blurSize, image.Height-1); y++) 
    {

Upvotes: 2

Buck3y3
Buck3y3

Reputation: 136

I have worked with 2 plugins before to blur images:

http://nbartlomiej.github.io/foggy/

http://blurjs.com/

Both work great. Very easy to follow examples are on their home pages.

They both require tweaking of the opacity and blur radius to get what you want.

To me your attempt looks to be missing the opacity overlay.

Upvotes: -1

Related Questions