I've got a list of images with dimensions for each image. I need to select and layout a group of images from that list so they fit on screen with slight overlaps, and no gaps. (gradient in the overlap to avoid a sharp transition)
I've researched 2d box packing algorithms, but they all assume that you need to use all the items, and, of course, that gaps are better than overlap.
If needed, I can downscale some or all of the images, however I can't upscale them.
Is there a good way to do this?
Maybe you could apply the 2d box packing algorithms you have researched, which assume you need all images, and just apply them using a selected group of images. This group could have been previously generated using any criteria. However, using the image's size seems adequate, because having a group of similarly-sized images eases the packing of said images. To achieve the overlapping you could use smaller dimensions for each image in the packing algorithm and then move each image of the group according to its difference in size from the packing algorithm and actual size.
Related
I am writing a (JavaScript) thumbnail generator and this bit of the project involves placing the N thumbnails in regular rows and columns within a larger target space, including a border around the outside and "visually pleasing" borders between each thumbnail.
Each thumbnail is large and already scaled to turn it into a thumbnail so one approach is to change the size of each thumbnail to help fulfil the packing conditions.
Each thumbnail is of an identical size. The number of thumbnails could be anywhere from a small number (4??) to something around 100.
I have been looking for some ideas and there seem to be plenty of example code for algorithms that pack as many rectangles of different sizes into the densest possible configuration - but I haven't come across anything similar to what I am trying to do.
If anyone can point me at some code or even an algorithm, I'd be very grateful.
For representing most popular artists from EchoNest API, I've been trying to set-up Silverlight Toolkit's TreeMap using images, their TreeItemDefinition.ValueBinding being defined as the area of the image.
While it mostly fills up the space when the image stretch is set to 'Fill' :
When setting image stretch to 'Uniform' a lot of blank spaces remain :
On this post, image carving is suggested : Treemapping with a given aspect ratio
How can I know which images should be carved and at what dimensions they should be carved if possible at all ?
Is this problem solvable without human intervention for a good result ?
I don't think there is a way to know which images should be carved and at what dimensions they should be carved. An ok-ish euristic might be to check if the mean energy of an image is > a certain threshold (this can be refined to check only blocks of every image, and combining the result later: if the image has blocks without details/energy, it can be carved, at least in that section).
What i think would be better is to apply seam carving to the already composed image: that will try to carve out the white outlines (adding "artificial" energy to the patches of images might lead to even better results, preserving more the shapes of each image). This paper might be of use to check out other image resizing methods too.
I'm working on an image gallery and I'd like to tightly pack the image thumbnails. The thumbnails are:
different aspect ratios
available at the same source resolution (longest edge 256 pixels)
I'd like to come up with an optimal solution (will probably have to be a heuristic) that allowed me to balance:
the padding between each thumbnail (preferably constant)
the consistency of thumbnail size (preferably all the same size)
the amount of each image that gets cropped for the display (preferably none)
the proximity of images consistent with their sort order (preferably sort-neighbours will be near one another in the grid)
I think this is a variant of the rectangle packing problem.
I've found some good references: Fast Optimizing Rectangle Packing Algorithm for Building CSS Sprites
But I wanted to check with the experts to see if anyone knows of:
any established algorithms that are available publicly,
any open source libraries that implement them or
any other mathematical references or guidance that might help me produce something as good as: http://labs.tineye.com/multicolr#colors=4b669e;weights=100;
I have come up with something like this (now also with code on github)
https://mendrik.github.io/diorama/
I should add that the order will be random, and the sizes try to be uniform, but for me it was more important to fill out the entire space rather than keep the sizes consistent. You can resize the browser window to see how it works.
If your height is not fixed, there are several other options, mostly knapsack or partitioning algorithms. 2d bin backing will leave you with gaps or wont find solutions that always fit all images.
my algorithm has almost no cropping and fits always all images into the given space, provided there are enough combinations to do so. the less images the more cropping obviously.
Most quantizer algorithms reduce the number of colors in an image, but the colors appear as dots throughout the image. When quantizing images which we know have a fixed number of colors, say, logos, it is desirable that similarly colored pixels are clustered together. Is there a quantizing algorithm that is suitable for this purpose?
Mean shift!
http://en.wikipedia.org/wiki/Mean-shift
http://homepages.inf.ed.ac.uk/rbf/CVonline/LOCAL_COPIES/TUZEL1/MeanShift.pdf
and many more links...
This one even has examples showing exactly (I hope) what you want to do.
I just finished writing a small script to combine a lot of png pictures into
a bigger one for CSS Sprite.
So basically, I have a list of dimensions [(w1,h2), ..., (wn,hn)]
and I need to put them into a frame with dimension (W,H) with WH as
small as possible. (Of course they cannot overlap)
The heuristic I used is obviously not optimal. I was wondering
if you had any ideas on the subject?
Do you think some smarter constraint, like grouping images with
similar histograms would make the png smaller?
It is not obvious from how you pose the question whether it is the dimensions of the picture, or the size of the PNG file, which you want to optimize, as picture histograms do not affect their dimensions (width and height).
However, finding minimal K so that, say, max(W, H) < K, so that all your pictures can be fit into a rectangular area W wide and H tall is an NP-complete problem, which means that it is difficult to solve well in general. See for example here.
How does the output from your script compare to the output from ImageMagick?
About making the resulting png smaller:
Be sure to use best compression level (level 9) and if possible, use PNGOUT to compress the PNG even better (there's a PNGOUT plugin for IrfanView, too).
Grouping images with similar histograms could be good, note that PNG uses zLib which uses a sliding window, so it work best if you group the images horizontal.
EDIT: Same for free space. It should be better to have free space at the top or the bottom of the image than at the left or right. The color of the free space shouldn't really matter, some color or black or white should be fine.
By the way, the size of the zLib sliding window is 32K, so it's not that good for detecting image duplicates if images are big. You'd better process the images yourself with an own algorithm in this case and use some duplicate removal or delta filter.