I was experiencing some performance issues when displaying a large number of images, I discovered the issue was that the full resolution image was being used when I really only needed an image less than 1/4 of the size. So I added a line in between BeginInit and EndInit to set the DecodePixelWidth to 200 which is the max width I will need in my layout. My performance was no longer an issue but some of the images are really small, definitely nowhere close to 200 pixels wide. Most of the images seemed to display correctly, and there doesn't seem to be any rhyme or reason to which are too small and which work correctly. I thought it might be due to differences in the original dimensions of the images but there was no pattern to the results. I tried bumping the width up to 600 which then allowed the offending images to display at the correct width of 200 but the performance then suffers.
At this point I am not even sure where to start looking, and would be really grateful for a kick in the right direction.
EDIT: Some more information below about the images and how I am using them.
Most of the images are around 1000X1500 although some have odd dimensions like 1000x1513. All of the images are JPEG. Currently each image is placed in a custom user control that I designed, nothing too fancy just a background around it with some text. Each user control is then placed in a grid, in its own row/column. The grid is inside a scrollviewer so the user can scroll through the list. This might not be the best way to accomplish what I am looking for but its what I came up with quickly and it works for the most part. Id be happy to switch to another method of display if it would accomplish what i want in an easier or more concise way.
The intended result is for a movie browsing app. There will be a scrollable list of movies, each represented as its own tile complete with title, movie poster, genre info, rating, and description. This list will be sortable on various items. The information about the movies is stored in a sql database on another machine. The images are originally stored on another machine but are copied locally to improve performance.
EDIT: I have been able to solve the issue by not using DecodePixelWidth and instead saving a copy of the image at the desired size, this has improved performance. Youngjae's recommendation of not using DecodePixelWidth along with his mention of using a virtualized list led me to the following set of articles on creating a Virtualized Wrap Panel which should solve any other performance issues. The article is for silverlight but from what I understand silverlight is basically a watered down version of wpf, if it works in silverlight it should work in wpf. It shouldn't be too difficult to convert it for my use.
Part 1 - MeasureOverride
Part 2 - ArrangeOverride
Part 3 - Animation
Part 4 - Virtualization
In MSDN link, you can find words as below.
The JPEG and Portable Network Graphics (PNG) codecs natively decode the image to the specified size; other codecs decode the image at its original size and scale the image to the desired size.
And, I recommend you NOT to use DecodePixelWidth for resizing purpose because of the above reason.
I don't know your original image sizes and formats, but isn't it enough to use with virtualized list and <Image Width="200" Stretch="Uniform">?
Related
I am currently working in Windows Form Apps and am making what will essentially be a map editor for a game. The way i have gone about this is by having a central TabControl where each TabPage contains a custom PictureBox control and all the other UI controls are around this central TabControl. The PictureBox uses its Paint event to draw everything that is placed on the map, and therefore draws multiple images of many sizes, rotations and scales etc to the single PictureBox. This has all gone well so far. The TabPage is essentially used as a view window for the PictureBox and is of size (1280x720).
The problem is with the scale to which the maps are being produced. The avg (and also maximum) map size on screen is around 19200x10800px and can be made up of hundreds of items at any one point. When drawing just a backdrop image of size 19200x10800px the PictureBox starts to flicker when it redraws and makes the program unusable. As the map is so big you are able to pan around them and this is where the flickering really shows. Also i do not want to use a 19200x10800px image source if possible for the sake of file sizes and the scaled image quality isn't an issue at all.
I have done heaps of reading on why this might be and feel like I have tried everything up until this point. So far ive tried:
Having the background image only 1920x1080 and scaling it up by 10x
Starting with a 1920x1080 image, programatically resizing it and drawing this image
Slicing the background into multiple segments (i tried many different amounts) and drawing only the ones that the view window can see (tried this for both a small(1080p) and large(10800p) images)
Using graphics clipping so that only the things on screen would be drawn
Used Double Buffering on both the picturebox and the form that the picturebox is on
Converting the image at initialisation to an "optimised bitmap" with faster formatting and then drawing the bitmap
I've probably tried a couple other things along with minor optimisations but its taken me so long ive forgotten the rest. From what i've read its most likely something to do with the control redrawing too slowly for some sort of performance reason or a limitation with picturebox's, however exactly what is going on i cannot tell due to lack of experience with form apps controls.
Currently to draw the background in the Paint event i have either:
g.DrawImage(image, new Rectangle(0, 0, (int)(image.Size.Width * levelScale), (int)(image.Size.Height * levelScale)));
or
g.ScaleTransform(levelScale, levelScale);
g.DrawImage(image, new Rectangle(0, 0, (int)(image.Size.Width), (int)(image.Size.Height)));
Where g is the Graphics object.
Have I hit the limit of Win form apps capabilities or is there something i may be missing?
Any and all help appreciated,
Thanks in advance.
Just for formality I though id answer my own question just in case anyone else would like to know the outcome.
Based off the overwhelming consensus that winforms was just not made to do the things I was trying to do with it I decided I had to move to some other platform. Suggested to me was WPF, DirectX and OpenGL but after some extensive searching around I found what I think is the optimal solution.
In order to utilise the power of DirectX hardware acceleration MS has made it so that you can embed XNA graphics devices into a winforms application. Essentially you can create custom controls that run in the normal winform style that have access to a much higher caliber of graphics control. In this manner (with a bit of extra work) I have replaced the picturebox I was using with a custom graphics control which handles all of the drawing. This has worked very well, and on the up side i havent had to take too much of a hit to my development time.
For those looking for more info refer to this question which has further links that should help. Once again thanks to all those who gave their advice!
This is a quoted answer from the URL at the bottom. There are code examples at the link at the bottom. Hope this is helpful; not sure if you tried this yet and maybe it'll help you get a little more juice out of the existing picturebox control. As explain in the other answers, it sounds like you will be forced to a more powerful solution in the near future regardless (DirectX/OpenGL or WPF)
** Partial quote from http://social.msdn.microsoft.com/Forums/en-US/68ecd1f6-2eeb-45ce-a881-24c62145ab0e/c-picturebox-problems
"I'd guess the real problem is that it takes too long to redraw the images. GDI+ is pretty slow, it doesn't use any video hardware acceleration. To speed it up, be sure to avoid rescaling the drawing and to use the Format32PArgb format. It is about 10 times faster than any other format. Load the images into a Bitmap with the right format first."
If you have a LOT of items (Maybe realized as controls), forget about the standard event mechanism of Windows Forms. Some time ago, i've written a logic gate editor/simulator which supported lots of thousands of gates in the editor and was really fast. There, I've used the canvas and draw the gates as custom "images" instead of putting them as controls. You'll have to write a custom GetUnderlyingGate function which resolves the current gate / tile (Is your editor a tilemap editor?) from a coordinate array. Also, there were some visible area optimizations.
Maybe, when i'm back home, I'll upload some sourcecode and notify you.
Is there any predefined control in WPF or VS2010 to implement the Image Zooming functionality (like Googlemaps) for a bitmap displayed over a panel using C#? My bitmap will be minimum 8GB in Size.
Thanks in advance
Murali
There is DeepZoom for Silvelight. There is no such thing in WPF. It was planned for WPF4, but removed before RTM.
Update:
Loading images of this size is pretty uncommon. You should consider tiling as others suggested. Also consider if you really need load all data at once. If the image has size of for example 30000x30000 then the user do not really need/can't to see all this data. Use tiling and appropriate image format (jpg etc) for each zoom level.
Relevant links:
Single objects still limited to 2 GB in size in CLR 4.0?
Pushing the Limits of Windows: Physical Memory
Our website allows people to upload images. However, we don't allow watermarked images, yet many do still get uploaded by users. Is there some software/code that can (at least in most cases) catch images that do have watermarks such as logos/images? I'm not sure if there is some sort of a standard.
You can do it via image classification.
Basically, train a CNN(Convolutional neural Network) model by feeding in some images with watermark and some without watermark in it and then use this model to judge the probability of watermark in any new image.
You can apply transfer learning on some existing pre-trained models(as of today inception v3 is the best out there) which can be retrained for your specific classification purpose.
For example this link shows how to do it to identify whether an image is that of a sunflower or a daisy or a rose.
https://www.tensorflow.org/tutorials/image_retraining
Here is a quick 5 minute tutorial about building a tensorflow image classifier: https://youtu.be/QfNvhPx5Px8
To detect any kind of logo on an image would be quite complicated. You would need something similar to face recognition, and a lot of AI...
To make it reasonably efficient you would need a library of logos to look for, and know where they are applied on the images. If the logo is always in the same place, you could just mask out the pixels where it would be, and calculate how close it is to the pixels of the logo. If logos varies in size and position, it gets more complicated.
You can't automatically detect a watermark. The best thing to do is make it real easy for others to report images that have a watermark and once reported, put them in a holding state where they aren't displayed until it's verified they either do or don't have a watermark.
With certain kind of AI it would be possible, at least with certain probability.
More precisely said it IS possible provided that you CAN define what the watermark is,
which is the greatest problem. Generic watermark detection is virtually undetectable,
consider logo at billboard at photo etc.
I'm currently working on an application with the need to display large engineering drawings that can be 8800x6800 or larger. The requirements state that the user should be able to pan and zoom the image. Ideally, they'd like to be able to annotate the images as well. If you look at the Windows Photo Viewer, you'll see the performance and features I'm looking to emulate, minus the annotation part.
So far, I've tried a couple different approaches for displaying the images and none seem to offer the performance that I'm looking for. Either they take up a lot of memory or they're slow. These are the approaches I've taken:
Viewbox with the Image as a child. Memory usage is OK, but re-sizing the Viewbox is slow. I haven't tried zooming/panning with this approach yet because of that.
InkCanvas with the Image set either as the background or as a child. With this approach zooming/panning by way of ScaleTransform and TranslateTransform seemed so-so, but memory usage could be up in the 450-600 MB range.
This is my first foray into image manipulation with .NET/WPF and my knowledge on the subject is fairly limited. What are some best-practices for dealing with large images, especially with WPF? I've read that tiling the image (like deep zoom) can help, but was unsure on how to do this or if it's the best idea in my situation. Do you know of any resources that might help me understand this better?
By "tiling" if you mean splitting the image up into separate pieces and only displaying a small subset at once to improve performance, this would be called "virtualisation".
Microsoft has an excellent blog about virtualising items and even provides a reference implementation of a VirtualCanvas which you can use as the starting point for a virtualised control.
Link here: https://learn.microsoft.com/en-us/archive/blogs/jgoldb/virtualized-wpf-canvas
Note that this blog includes zoom and scale as part of the discussion as well as a discussion about smooth scrolling and pre-emptive loading of tiles for best UI responsiveness.
Is WPF be able to manipulate large bitmaps where GDI+ cannot due to memory limitations?
I have bitmaps that are 10,000x10,000 easily, and could even be much larger than that. Worst case I think I can break the single bitmap into large tiles and work with that I guess.
I basically need to do four things
Take an set of tiled images
Put all of those tiles into a single bitmap
Convert the bitmap to black and white
Scan the bitmap looking for changes from black to white
I know how to do these things in GDI+, but the problem I am running into is that the size of my bitmap is too large for the machine I am using, and it causes the program to crash, and I cannot make the image any smaller, so I am hoping that WPF will be able to succeed where GDI+ has failed me.
I don't think WPF will be able to help you here.
Why do you want to use bitmap object? You may as well work with an two-dimensional array of bytes or doubles (or any other type, depending oh what accuracy and range do you need), especially if you work with one channel only. Bitmaps have accessor methods (GetPixel and such) with huge computational overhead, working with arrays is by orders of magnitude faster (I know from personal experience), the only issue is that you can't display them as they are (you would have to convert the array back into image, which is fairly simple). But since you seem to want to do some sort of analysis on the data, I think array would be much more suitable for your needs.
I can post code samples detailing conversion from bitmap (either WPF or WinForms) to array an back if you want.
But remember, that 32bit .NET application can use approximately 1.2-1.4 gigabytes of memory - you have to fit in this space or you start getting OutOfMemory exceptions.
I eventually decided that the best course of action was to only work with the tiles, and then have an array that holds the actual information about each tile that I need. Given the number of tiles, it was the only sensible thing I could do.
Like CommanderZ said. Its Windows PRESENTATION Foundation, not Windows Image-manipulation Foundation.
You should try to either find some kind of image-manipulation library, but looking at size of your image, then doing everything yourself might be only way.
Especialy, you probably wont be able to work with bitmap as a whole, so you are going to work with tiles. Then it becomes problematic if you need to work with neighboring pixels. But I guess you should look into this yourself.