PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images....
PictureBox is zooming up my images.... PictureBox is zooming up my images....
PictureBox is zooming up my images....
Go Back  Xtreme Visual Basic Talk > > > PictureBox is zooming up my images....


Reply
 
Thread Tools Display Modes
  #1  
Old 01-05-2011, 06:37 PM
WhatsMyUsername's Avatar
WhatsMyUsername WhatsMyUsername is offline
Regular
 
Join Date: Jan 2011
Location: Currently? Costa Rica
Posts: 52
Default PictureBox is zooming up my images....


Hello.

In this question I managed to combine two .png images into one, and then display the result in a pictureBox image.

However, the pictureBox seems to scale up my image! Makes it bigger!

The pictureBox size is 96x128. The two images I have combined are 96x128. The pictureBox's SizeMode is set to "Normal"

I have noticed that even though the pictureBox's image seems to be zoomed, it is cut to keep the 96x128 rect. But I don't want it to be zoomed...

Thanks.
Reply With Quote
  #2  
Old 01-05-2011, 07:40 PM
AtmaWeapon's Avatar
AtmaWeaponPictureBox is zooming up my images.... AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

Check the value of the SizeMode property. If it's Normal and it's being clipped, it's possible the image is larger than you think. We'll come back to that.

If it's one of the other values, that might be the problem.

If it's Normal and it's still being clipped, I think you might have a DPI problem. My guess is DrawImageUnscaled is the culprit. If you read the documentation, you'll see that this method draws an image using its original physical dimensions, which will sometimes perform some scaling. Try DrawImage() instead; if that works then great. I can't get a demo to break like I want it to, so I'll just have to ask you to try it and see if it helps. If not, I think you need to post a couple of sample images and let us try to reproduce it.

That code you got from the guy on SO is horrible btw. It should be disposing of the temporary Layer bitmaps. I'm going to edit it.
__________________
.NET Resources
My FAQ threads | Tutor's Corner | Code Library
I would bet money 2/3 of .NET questions are already answered in one of these three places.
Reply With Quote
  #3  
Old 01-05-2011, 07:48 PM
WhatsMyUsername's Avatar
WhatsMyUsername WhatsMyUsername is offline
Regular
 
Join Date: Jan 2011
Location: Currently? Costa Rica
Posts: 52
Default

SizeMode is normal.
All images I use have been confirmed to be 96x128.
PictureBox size is 96x128.

I believe I also tested with DrawImage() and I got the same results.

What could be wrong.....

And thank you, I am quite new on VB.NET, but I'm getting the hang of this
Reply With Quote
  #4  
Old 01-05-2011, 09:55 PM
WhatsMyUsername's Avatar
WhatsMyUsername WhatsMyUsername is offline
Regular
 
Join Date: Jan 2011
Location: Currently? Costa Rica
Posts: 52
Default

What is interesting is that when I try to use GetPixel and SetPixel to combine two images, the resulting size is perfect. However, GetPixel and SetPixel seem to ignore the transparent areas for .png images... Maybe you can help me there? A way to also accept transparency with such method?
Reply With Quote
  #5  
Old 01-06-2011, 12:27 AM
Frog's Avatar
Frog Frog is offline
Freshman
 
Join Date: Aug 2003
Location: Australia
Posts: 47
Default

A transparent color is a color with alpha value of 0
ie:
Dim col As Color = Color.FromArgb(0, 100, 100, 100);
In previous attempts I created a bitmap with pixels drawn with low alpha values, but when using getpixel method the returned color looked the same but had different Argb values
It will be interesting if someone has a way to achieve this.
Reply With Quote
  #6  
Old 01-06-2011, 09:52 AM
AtmaWeapon's Avatar
AtmaWeaponPictureBox is zooming up my images.... AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

Would it be possible to provide some samples of the images that are failing? I swear I've had a problem like this in the past but I'm having a hard time reproducing it. I'm going to keep working on it but if you could provide some images that don't behave properly it'd go a long way.
__________________
.NET Resources
My FAQ threads | Tutor's Corner | Code Library
I would bet money 2/3 of .NET questions are already answered in one of these three places.
Reply With Quote
  #7  
Old 01-06-2011, 11:37 AM
AtmaWeapon's Avatar
AtmaWeaponPictureBox is zooming up my images.... AtmaWeapon is offline
Fabulous Florist

Forum Leader
* Guru *
 
Join Date: Feb 2004
Location: Austin, TX
Posts: 9,500
Default

Actually, I figured it out. I knew this seemed familiar and now I remember butting into it.

DrawImageUnscaled() works as advertised, but the behavior isn't what you might intuitively expect; it looks like it scales things. Here's what really happens.

Images have both a size and a resolution. The resolution indicates how many pixels per inch are in the image. When you combine the two you get the physical dimensions of the image. For example, if an image has a 72 dpi resolution and it is 100x100, the image will be ~1.38 inches square. If the image had a resolution of 96 dpi, it would be ~1.04 inches square. A 300 dpi image would be ~0.33 inches square. Windows defaults to using 96 dpi for your monitor, and many image applications default to using this as well. Images intended for the web are sometimes saved at 72 dpi. Why? It lets a web designer create a 3-inch wide image with 216 pixels instead of 288; that's a 25% reduction in the file size of the image. This mattered a lot back in the days of dial-up, and the convention is still sticking around. Many images intended for printing are 300 DPI or greater; many printers can print with 300 dpi resolution and this is roughly the minimum required to make text look crisp at small sizes. (Your display has to antialias text because 96 dpi is not sufficient to make small text look pleasant.)

So when you're working with images it's important to know if they have the same resolution and if that resolution matches the display. If the images are different resolutions, you have to take that into account; if you draw a 100x100 72 dpi image at its natural resolution, it will be displayed larger on the screen than a 100x100 96 dpi image; it'll render at roughly the same size as a 133x133 96 dpi image.

.NET handles this by giving you both DrawImage() and DrawImageUnscaled(). DrawImage() always draws the image using the display's resolution, so it will draw a 100x100 72 dpi image with the same physical width as a 100x100 96 dpi image. DrawImageUnscaled() always draws the image using the image's resolution, so it will draw a 100x100 72 dpi image larger than a 100x100 96 dpi image. But there's a subtle pitfall.

Both methods have overloads that take an image and a location but no size. This overload is problematic. If you don't tell DrawImage() the desired size of your image, it guesses you want the original physical size. In other words, it's as if it were implemented this way:
Code:
Public Sub DrawImage(ByVal image As Image, ByVal x As Integer, ByVal y As Integer)
    DrawImageUnscaled(image, x, y)
End Sub
This is probably a bug, but odds are slim MS would fix it at this point since it's been around so long.

The solution is to *always* use one of the overloads that takes both a location and a size. You have to keep in mind that DrawImage() and DrawImageUnscaled() account for the sizes differently though. The explanation will go better with code:

Code:
DrawImage(img, 0, 0, 100, 100)
This will draw an image at location (0, 0) and make it fit within a 100x100 pixel square in terms of the resolution of the display. Here's some cases:
  • img is 100x100x72. The true physical size should be ~1.38 inches square, but the image will be scaled down to a physical size of 100 / 96 = ~1.04 inches.
  • img is 100x100x96. It is displayed at a physical size of ~1.04 inches with no scaling.
  • img is 100x100x120. It would be ~0.83 inches at native resolution, but is scaled up to fit in a ~1.04 inch square.

Code:
DrawImageUnscaled(img, 0, 0, 100, 100)
This will draw an image at location (0, 0) and make it fit within a 100x100 pixel square in terms of the resolution of the image. Here's the same cases:
  • img is 100x100x72. It will be displayed with a physical size of ~1.38 inches, as if it were a 133x133x96 image.
  • img is 100x100x96. This will appear the same as DrawImage() since the display and image match.
  • img is 100x100x120. It will be displayed with a physical size of ~0.83 inch, as if it were an 80x80x96 image.

I guess a good summary is DrawImage() when given a size will always draw two images with the same dimensions as the same physical size, regardless of the image's resolution. DrawImageUnscaled() will never draw two images with identical dimensions but different resolutions at the same size.

In case that was a little to confusing, I attached an application that demonstrates.

So the appropriate method to combine your images should probably look like this:
Code:
Dim result As New Bitmap(96, 128)

Dim directoryName As String = String.Format("{0}Bases", resourcesPath)
Using g As Graphics = Graphics.FromImage(result)
    For Each imageName As String In BasesCheckList.CheckedItems
        Dim fileName As String = IO.Path.Combine(directoryName, imageName)
        Using layer As New Bitmap(fileName)
            g.DrawImage(layer, 0, 0, 96, 128) 
        End Using
    Next
End Using
This will draw all of the images to fit within the area even if it means they have to be rescaled to match the display. If you use DrawImageUnscaled(), the images will likely be clipped if they have different resolutions. I'm going to add this to the StackOverflow question; please accept my answer if it works

Side note: when I say "the resolution of the display" above, what I really mean is "the resolution of the Graphics object used to draw". This can represent a display, a printed page, etc. and the resolution may not always be 96 dpi.)
Attached Files
File Type: zip PictureScaling.zip (12.8 KB, 13 views)
__________________
.NET Resources
My FAQ threads | Tutor's Corner | Code Library
I would bet money 2/3 of .NET questions are already answered in one of these three places.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Advertisement:





Free Publications
The ASP.NET 2.0 Anthology
101 Essential Tips, Tricks & Hacks - Free 156 Page Preview. Learn the most practical features and best approaches for ASP.NET.
subscribe
Programmers Heaven C# School Book -Free 338 Page eBook
The Programmers Heaven C# School book covers the .NET framework and the C# language.
subscribe
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
This comprehensive step-by-step guide will help get your database-driven ASP.NET web site up and running in no time..
subscribe
PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images.... PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images.... PictureBox is zooming up my images....
PictureBox is zooming up my images....
PictureBox is zooming up my images....
 
PictureBox is zooming up my images....
PictureBox is zooming up my images....
 
-->