Poor thumbnail quality when using listview
-
Hi, from what I read in the documentation, not from experience, I would say you can't get what you want in that way. There may actually be multiple problems: 1. ImageSize sets the size of all images in the list (defaults to 16*16). If the images you add have a different size, they will be rescaled. If you set a size of 160*160 while the images have smaller size originally, they will be scaled up resulting in poor quality. What is the typical size of the images in the database? 2. The rescaling is also likely to alter the aspect ratio. You could preserve aspect ratio by creating a new, square, image yourself. One way to do that is like this: - create an empty Bitmap of the right size; - call CreateGraphics on it; - fill it with the background color you want using Graphics.FillRectangle() - then use an appropriate Graphics.DrawImage() overload to paint the image, homogenously rescaled, and centered, leaving the borders (top and bottom, or right and left, depending on how the aspect ratio fits) in the background color. You now have a square image of correct size fitting your ListView requirements. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
Hi, A typical image may vary because i am using different size images. Typical size may be 1024 x 768 or 640 x 480. if you dont mind could you give me some sample code regarding #2 please? Thanks,
Untested (see also my next message):
// input: Bitmap bm1, size w1*h1
// output: Bitmap bm2, size w2*h2
public Bitmap ResizeImageKeepingAspectRatio(Bitmap bm1, int w2, int h2, Brush backColor) {
int w1=bm1.Width;
int h1=bm1.Height;
Bitmap bm2=new Bitmap(w2, h2);
Graphics g=Graphics.FromImage(bm2);
g.FillRectangle(backColor, 0, 0, w2, h2);
int x2=0;
int y2=0;
float scale=1;
if (w1*h2>w2*h1) {// w2 is the limiting factor
y2=h2-h1*w2/w1);
scale=w2/(float)w1;
} else { // h2 is the limiting factor
x2=w2-w1*h2/h1);
scale=h2/(float)h1;
}
g.ScaleTransform(scale, scale);
g.TranslateTransform(x2/2, y2/2);
g.DrawImage(bm1, 0, 0);
g.Dispose();
return bm2;
}You need to test this; I suggest you give it a 100*100 and convert it to first a 40*50, and then a 50*40. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
modified on Friday, February 26, 2010 6:54 PM
-
Hi, A typical image may vary because i am using different size images. Typical size may be 1024 x 768 or 640 x 480. if you dont mind could you give me some sample code regarding #2 please? Thanks,
fixed minor mistakes; now tested:
// input: Bitmap bm1, size w1\*h1 // output: Bitmap bm2, size w2\*h2 public static Bitmap ResizeImageKeepingAspectRatio(Image bm1, int w2, int h2, Brush backColor, bool centered) { int w1=bm1.Width; int h1=bm1.Height; Bitmap bm2=new Bitmap(w2, h2); Graphics g=Graphics.FromImage(bm2); g.FillRectangle(backColor, 0, 0, w2, h2); int x2=0; int y2=0; float scale=1; if (w1\*h2>w2\*h1) {// w2 is the limiting factor if (centered) y2=h2\*w1/w2-h1; scale=w2/(float)w1; } else { // h2 is the limiting factor if (centered) x2=w2\*h1/h2-w1; scale=h2/(float)h1; } g.ScaleTransform(scale, scale); g.TranslateTransform(x2/2, y2/2); g.DrawImage(bm1, 0, 0); g.Dispose(); return bm2; }:)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
Untested (see also my next message):
// input: Bitmap bm1, size w1*h1
// output: Bitmap bm2, size w2*h2
public Bitmap ResizeImageKeepingAspectRatio(Bitmap bm1, int w2, int h2, Brush backColor) {
int w1=bm1.Width;
int h1=bm1.Height;
Bitmap bm2=new Bitmap(w2, h2);
Graphics g=Graphics.FromImage(bm2);
g.FillRectangle(backColor, 0, 0, w2, h2);
int x2=0;
int y2=0;
float scale=1;
if (w1*h2>w2*h1) {// w2 is the limiting factor
y2=h2-h1*w2/w1);
scale=w2/(float)w1;
} else { // h2 is the limiting factor
x2=w2-w1*h2/h1);
scale=h2/(float)h1;
}
g.ScaleTransform(scale, scale);
g.TranslateTransform(x2/2, y2/2);
g.DrawImage(bm1, 0, 0);
g.Dispose();
return bm2;
}You need to test this; I suggest you give it a 100*100 and convert it to first a 40*50, and then a 50*40. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
modified on Friday, February 26, 2010 6:54 PM
Hi Luc, Thanks for your help. I do have a small problem regarding images which have 640(width)and 480(height). The right hand side of the image appears to be cut off so i cant see whats on the right hand side of the image. I did pass in the paramters as suggested. I tried using the Width and Height property of ImageList size(100,100) and passed it into your method to test the if it would work. Now images which are 1024 by 768 scale nicely. I then increased the size of the ImageList to (150,150) but that hasnt solved the issue. if i set the ImageListSize to (40,50) or vice versa than the images look small. if i pass in just the values 40, 50 or 50, 40 into your method the images look small and the corner of the images are cut off(the 640 by 480 image). I tried to adjust your code so i could fix the problem but i havent yet been able to solve it. Can you advise please? Thanks,
-
Hi Luc, Thanks for your help. I do have a small problem regarding images which have 640(width)and 480(height). The right hand side of the image appears to be cut off so i cant see whats on the right hand side of the image. I did pass in the paramters as suggested. I tried using the Width and Height property of ImageList size(100,100) and passed it into your method to test the if it would work. Now images which are 1024 by 768 scale nicely. I then increased the size of the ImageList to (150,150) but that hasnt solved the issue. if i set the ImageListSize to (40,50) or vice versa than the images look small. if i pass in just the values 40, 50 or 50, 40 into your method the images look small and the corner of the images are cut off(the 640 by 480 image). I tried to adjust your code so i could fix the problem but i havent yet been able to solve it. Can you advise please? Thanks,
forget the 40,50 and 50,40; that was for testing my code only, which I did, see my other post. No need to adjust my code any further, it does what its name implies. If you can't get your stuff right, explain in detail and provide code and symptoms. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
forget the 40,50 and 50,40; that was for testing my code only, which I did, see my other post. No need to adjust my code any further, it does what its name implies. If you can't get your stuff right, explain in detail and provide code and symptoms. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
Hi, I am testing the following code. Its just the images which are 640 x 480 appear to be cut off on the right hand side. What i mean is say you have a picture(640 x 480) of a Table but on the right side of the table there is something there, say a bowl of fruit, if i use the method below it cuts it off so you dont see the remaining contents of the image. I did set the boolean parameter to true but i am not sure why the problem is occuring with those image sizes? I assumed that it would keep the aspect ratio.
public Bitmap ResizeImageKeepingAspectRatio(Image bm1, int w2, int h2, Brush backColor, bool centered)
{
int w1=bm1.Width;
int h1=bm1.Height;
Bitmap bm2=new Bitmap(w2, h2);
Graphics g=Graphics.FromImage(bm2);
g.FillRectangle(backColor, 0, 0, w2, h2);
int x2=0;
int y2=0;
float scale=1;
if (w1*h2 > w2*h1) {// w2 is the limiting factor
if (centered) y2=h2*w1/w2-h1;
scale=w2/(float)w1;
} else { // h2 is the limiting factor
if (centered) x2=w2*h1/h2-w1;
scale=h2/(float)h1;
}
g.ScaleTransform(scale, scale);
g.TranslateTransform(x2/2, y2/2);
g.DrawImage(bm1, 0, 0);
g.Dispose();
return bm2;
}Here is the code i am using in the button click
StaffImageList.ImageSize = new Size(120, 120);
this.StaffListView.View = View.LargeIcon;
StaffImageList.Images.Add(fPath, ResizeImageKeepingAspectRatio(img,StaffImageList.ImageSize.Width,StaffImageList.ImageSize.Height, brush, true));Could you advise please? Thanks
-
Hi, I am testing the following code. Its just the images which are 640 x 480 appear to be cut off on the right hand side. What i mean is say you have a picture(640 x 480) of a Table but on the right side of the table there is something there, say a bowl of fruit, if i use the method below it cuts it off so you dont see the remaining contents of the image. I did set the boolean parameter to true but i am not sure why the problem is occuring with those image sizes? I assumed that it would keep the aspect ratio.
public Bitmap ResizeImageKeepingAspectRatio(Image bm1, int w2, int h2, Brush backColor, bool centered)
{
int w1=bm1.Width;
int h1=bm1.Height;
Bitmap bm2=new Bitmap(w2, h2);
Graphics g=Graphics.FromImage(bm2);
g.FillRectangle(backColor, 0, 0, w2, h2);
int x2=0;
int y2=0;
float scale=1;
if (w1*h2 > w2*h1) {// w2 is the limiting factor
if (centered) y2=h2*w1/w2-h1;
scale=w2/(float)w1;
} else { // h2 is the limiting factor
if (centered) x2=w2*h1/h2-w1;
scale=h2/(float)h1;
}
g.ScaleTransform(scale, scale);
g.TranslateTransform(x2/2, y2/2);
g.DrawImage(bm1, 0, 0);
g.Dispose();
return bm2;
}Here is the code i am using in the button click
StaffImageList.ImageSize = new Size(120, 120);
this.StaffListView.View = View.LargeIcon;
StaffImageList.Images.Add(fPath, ResizeImageKeepingAspectRatio(img,StaffImageList.ImageSize.Width,StaffImageList.ImageSize.Height, brush, true));Could you advise please? Thanks
I checked again with your sizes (640*480 -> 120*120) and my resizing method works as expected. You can verify by saving the returned image to a file, then inspecting it with whatever image viewer you have. If anything goes wrong, it would be in the ListView. I'm not all that familiar with it, I can't advise any further. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
I checked again with your sizes (640*480 -> 120*120) and my resizing method works as expected. You can verify by saving the returned image to a file, then inspecting it with whatever image viewer you have. If anything goes wrong, it would be in the ListView. I'm not all that familiar with it, I can't advise any further. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
Hi, Can you confirm the following please? So did you use an image of 640 x 480? Regarding the ImageList size, did you pass the ImageSize.Width and ImageSize.Height into your modified method? I will try this again. Thanks
As I said before, I used a 640*480 image and asked for it to be rescaled to 120*120, no ListView involved. All is well. You should learn to debug, look at the end result and stare at your code; instead check your inputs, observe intermediate results, and if needed split statements into a few lines so you can see more. What I typically do is add log statements abundantly, logging relevant information to the Console and/or to a text file. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.
-
As I said before, I used a 640*480 image and asked for it to be rescaled to 120*120, no ListView involved. All is well. You should learn to debug, look at the end result and stare at your code; instead check your inputs, observe intermediate results, and if needed split statements into a few lines so you can see more. What I typically do is add log statements abundantly, logging relevant information to the Console and/or to a text file. :)
Luc Pattyn [Forum Guidelines] [Why QA sucks] [My Articles]
I only read code that is properly formatted, adding PRE tags is the easiest way to obtain that.
All Toronto weekends should be extremely wet until we get it automated in regular forums, not just QA.