How to show an image in PictureBox if the picture can be from 10x10 to 500x500

Question

Now I used next code to download picture from desctop to PictureBox

        OpenFileDialog openFileDialog = new OpenFileDialog();
        openFileDialog.Filter = "BMP|*.bmp";
        if (openFileDialog.ShowDialog() != DialogResult.OK)
            return;

        pictureBox.Load(openFileDialog.FileName);
        pictureBox.SizeMode=PictureBoxSizeMode.StretchImage;
        pictureBox.BorderStyle = BorderStyle.Fixed3D;

If I used a normal picture(100x100) it looks nice(unfuzzy).

If I used a smal picture(15x15) it looks fuzzy.

I want to know how to make them unfuzzy( they can look like bricks, but they need to be unfuzzy);

Waiting result for small picture need to look like this

Waiting result for normal picture need to look like this

try changing picture box size to image size. If your image is stretched too much it will appear like this. — Kira, Mar 04 '16 at 11:45
It is fuzzy because it's being anti aliased. There is insufficient image data to fill a 100x100 square, so the system is attempting to "fill in the blanks" by smoothing out the image across the available pixels. There is no real solution to this, you could just set the image to be actual size instead, in which case no scaling would occur — Charleh, Mar 04 '16 at 11:52
Possible duplicate http://stackoverflow.com/q/21854582/2613020 — Sarvesh Mishra, Mar 04 '16 at 11:55
PictureBox always uses a 'decent' value for Graphics.InterpolationMode when it rescales the image to fit the control. You like the low-quality one, InterpolationMode.NearestNeighbor. Just resize the image yourself. — Hans Passant, Mar 04 '16 at 12:13

Gediminas Masaitis · Accepted Answer · 2016-03-04T19:42:42.927

4

The fuzziness comes from image interpolation. To have your desired blocky look, you need to use nearest neighbour interpolation.

Thankfully, .NET has this build into. You can set to the interpolation mode to the GDI Graphics object which renders your PictureBox.

To do so I'd recommend exteding the PictureBox user control and adding an InterpolationMode parameter. Then, you can override the OnPaint method, and use your interpolation mode.

public class InterpolatingPictureBox : PictureBox
{
    public InterpolationMode InterpolationMode { get; set; }

    protected override void OnPaint(PaintEventArgs eventArgs)
    {
        eventArgs.Graphics.InterpolationMode = InterpolationMode;
        base.OnPaint(eventArgs);
    }
}

Here is a 16x16 image: , upscaled to 256x256 using

NearestNeighbour (left)
Bilinear (which is default, middle)
HighQualityBilinear (right)

All are rendered on the InterpolatingPictureBox control.

edited Mar 04 '16 at 19:42

answered Mar 04 '16 at 12:09

Gediminas Masaitis

3,172
14
35

And that is a good example of the "crappy" anti aliasing talk about in my answer. Compare that to the interpolations that for example QImage does (which is a software used to prepare images for printing) and you will be surprised how bad they look. The problem is: Those modes were never made for 10:1 size increases. – TomTom Mar 04 '16 at 12:17
1

Your images are not as representative as they could be. The anti-aliasing pixels that the text renderer uses are visible, what TomTom is incorrectly complaining about. You'd have to start with a 16x16 A that was rendered with TextRenderingHint.SingleBitPerPixelGridFit to match the OP's scenario. – Hans Passant Mar 04 '16 at 12:24
@HansPassant You are right, I updated my pictures to not include antialiasing – Gediminas Masaitis Mar 04 '16 at 12:47
You got it, well done. Too bad the wrong answer was selected, can't help you with that one. – Hans Passant Mar 04 '16 at 12:49

score 0 · Answer 2 · edited May 23 '17 at 11:45

You have a SERIOUS problem. There is no easy solution.

I want to know how to make them unfuzzy

Impossible. Sharpening (which is what you want) of images to larger resolution is possible within reason, but this takes seriously advanced programs that run for quite some time. Not talking as programmer here - but this is a standard step in printing fine art photography. Photos have a relatively low resolution (mine come at up to 43 megapixel) and printers a much higher one.

There are some AA approaches that are easy, but 10x10 sized up t0 100x100 is going to challenge even the most advanced programs - 10x10 is nothing to work with. You talk of 10x starting with no data on the beginning.

You CAN turn off anti aliasing, resize the image in code (easy to do) with no anti aliasing - but this will turn real pictures looking UGLY. .NET has no real high level sharpening functionality and again, 10x10 is not enough to start working with.

The best you can do is not load them into a picture box. Load them into a bitmap, then draw that onto a new bitmap of optimal size (100x100). This at least gives you full control over the resizing.

The code for this you can find at Scaling a System.Drawing.Bitmap to a given size while maintaining aspect ratio

while

Image resizing in .Net with Antialiasing

tells you how to select anti aliasing.

But again: expect quite little. Those anti aliasing modes are purely technical and not anything that you use for photos. Plus selecting the right one depends on the input image - so you can use a default or give the user a choice. I am probably overcomplicating things, but outside programming I actually DO deal with images that need to be scaled up with as little image loss as possible for large printing.

This is just incorrect. Anti-aliasing doesn't add fuzziness when upscaling, anti-aliasing *isn't even used* when upscaling. Antialiasing is only used when creating the original small image, which isn't even what OP was asking about, as you can see his example isn't antialiased. — Gediminas Masaitis, Mar 04 '16 at 12:53
You really have no clue what you are talking about. I suggest you go and visit the qimage website and see how upscaling properly done can look like. — TomTom, Mar 04 '16 at 13:14
I have absolutely no idea what you're talking about, the OP explicitly asked said that he wants the text to look blocky (or 'like bricks'). That's exactly the opposite of what anti-aliasing does - it "smoothes out" lines, removing blocky edges. You can read about it [here](http://www.cambridgeincolour.com/tutorials/image-interpolation.htm), just scroll down to the section about anti-aliasing. And removing (or rather, using the most basic nearest-neighbour) interpolation solves the fuzziness issue, which is what this whole question is about. — Gediminas Masaitis, Mar 04 '16 at 13:27

How to show an image in PictureBox if the picture can be from 10x10 to 500x500

2 Answers2