I'm using Wordpress and using their code, I'm outputting the gallery uploads to a specific page as an unordered list of images.
I'm wondering if there's a way to position these images absolutely within the container (which will be relative) using JS and without any overlapping? So, it must position them and then take note where that image is and make sure the next image doesn't overlap etc.
This should be a random generation each time, but I'm also wondering if it's possible to make the images and their position the same each time?
Thanks guys, look forward to some thoughts.
-R
EDIT: You can see the HTML and progress so far here: http://richgc.com/freelance/staton/furniture/
There are a few jquery plugins that do this.. Here is one:
http://masonry.desandro.com/
Go with #lucuma's answer (I didn't know there were pre-existing plugins).
If you were going to implement such a plugin by hand, you could use a cutting algorithm, traditionally used for optimizing the cutting out of parts from sheet metal, to determine locations for your images that will not overlap.
If you select a deterministic algorithm, you should always get placeholders for images in the right place. Were images always of different sizes, that would ensure images always appear in the same place. Since many images will probably be the same size, you could assign images to the "cut out slots" in e.g. alphabetical order of the image file name.
Related
I have been working on a eCommerce project and now I am trying to implement search based on image .I have searched the web for possible solution.I came to know google and yahoo has stopped its support for image search API.I would like to know what needs to be extracted from an image and based on what i need to search in my db.Any suggestions will be helpful.Thanks
If you want a brute force method, you can calculate the hash of each image, store it in a database and calculate the hash of the file to search for, match it with the database and well... now you found the exact match of the image.
That may be useful in some situations, but in most you would want to find "similar" images. You could extract meta data from the image, like date taken, filename, etc. If you want to search your own fotoalbum, it is likely that images taken around the same time, are near the same location and thus contain the same content.
Google uses an (as far as I know) unknown method to take a part of the image and search using that information. For example: if you split the image in a X by Y grid and calculate the mean colour value, you can search the database for a match (obviously, you'll have to do this for every image and store the result in the database). If you allow a certain difference in value between the search image and database values, you are likely to find another image that is similar. Searching for only a part of the image, in the database, allows you to find pictures that look the same, but are moved.
Microsoft has created photoDNA, a method that finds the "edges" of the objects in the picture, turning it in a black-white image. Than they resize it to a small resolution and calculate a has. Using this method, you can find photo's that are near to the same, but slightly differ. Ideal if you want to find edited images and resized images.
Another method is to calculate the colour spectrum of the image, normalise it and search for that (with small variations) in a database. Than you'll get images that have near to the same colours, yet the content can be entirely different!
Deep learning could also be an option, if you have allot of images of the same object. By training the computer (e.g. with nVidea cuda), you can make the model recognise objects. If you than search with a photo with a dog on it, your result might be other images with a dog on it.
In summary: there are allot of different methods, each and every one has its own strength and weaknesses, but one they have in common: it's not easy to make!
suppose there is an image on web without watermark. And someone downloads it and makes some edits on it like adding watermark etc etc. Is it possible to write a script in php to compare these two images. Like when I submit these two images to the script, it should be able to output the original image and manipulated image.
I read google's webmaster page which says
Google often finds multiple copies of the same image online. We use many different signals to identify the original source of the image
Blockquote
This is the main concern of my question
One more doubt is will there be any meta tags inside an image. if at all how to read them. Is it possible to edit them. Are there any information(not visual) inside an image which cannot be edited.
Anything within the image can be edited (it is, after all, just a collection of bytes), and it's definitely trivial for someone to add a watermark to an image, or simply change the contrast ever-so-slightly, to make it a very different file from the original. There are several other non-destructive changes that would make image files look completely different to a naive comparison algorithm (e.g., scaling, changing filetypes and compression, changing brightness, rotation, etc.).
Advanced image processing algorithms, however, can still often identify similarities between images that have been manipulated in ways like those above. There are many algorithms to do this, and honestly you could spend thousands of hours trying to roll an algorithm like this yourself. These sorts of algorithms are referred to as "content-based image retrieval."
You might be better off calling into engine that's already been developed to do exactly this. Here are some possibilities:
TinEye has a RESTful API that you can use, described here.
You could scrape the response from Google's Search by Image results using this technique.
You could use any of the number of suggestions within this slightly older StackOverflow post.
Good luck!
Photos taken by digital cameras usually have exif data embedded.
You can get the data with the exif_read_data function in PHP.
As for identifying similar images, here's some useful resources:
TinEye
SO Q on image similarity
The comments on Resig's article
You could submit both images to ImageEdited and see which one has been edited. Even if the exif data's missing, it tells when an image has been created with a program.
I'm trying to figure out via PHP if I can do the following. Imagine I have a two images. The first is an image of a square (50px by 50px). The second image, is that exact same square, only offset by 5px to the left.
I'm wondering if there is a way to dynamically generate all the images in-between to make this a smooth looking image transition (ie in this case generate the other 4 images to make it look like it moved from left to right). This would be a pretty simple situation, however would be applied to more complex images with the exact same premises, essentially using two images to predict the mediums.
Thank you in advance for your help
php would only be a wrapper, think eval() and google it, like http://www.linuxfocus.org/English/September2001/article139.shtml
regards,
/t
I believe the best thing you could hope to do with PHP is to do a 'morph' animation, where you sample the pixels for the first image and the second image, then create a third image consisting of the average color values. Repeating this process you could create as many sub-frames as you would like, but the result would be a blurring / morphing of image A -> image B, and would only be perceived as an animation with the simplest of input images.
More complicated algorithms including edge-detection or hinted-shape tweening could be utilized and implemented, however PHP might not be the best choice for this.
You can dynamically create images with a combination of PHP and ImageMagick.
You can pass in each dimension to ImageMagick, and it will generate an image on the fly for you. Create an image for each pixel you offset, resulting (in this case) in four extra images you can use later for your animation.
I am trying to create a dynamic image that will be created from PHP using GD... What I need to do is be able to specify the layering of one image over another. The images are supposed to overlap slightly and get smaller as you move towards the right of the image... however the only way I can get php to render the images to the left on top of the ones to the right is by reversing the script.
I would like some sort of way to be able to add the images 1 by 1 to the picture from left to right but having the image on the left overlap the one on the right....
Exactly like z-index in PHP, is there a way to do this?
Image manipulation in GD is additive, AFAIK. If you are going to manipulate an image (in your case, create a composite image), then you need to start with a base (maybe a solid background) then add pieces to it.
You can get the effect that you want by performing one of the two procedures:
take the "left to right" stack that you have and reverse it, applying images to the composite from right-to-left.
go "left-to-right" and calculate which part of each image will show around the previous image (to its left). This method is significantly more complicated because the image on the "lower z-index" can show around up to four corners of the image to it's left.
I run a site with lots of small images (www.iconfinder.com) and would like to develop a feature that can compare and recognize images. A user should be able to upload an image (icon) and then the site will respond with information about the image if it's in the database.
What is the approach to finding similar (or the same image). I know I can compare md5 of the two images, but I also want be able to find matches if the are scaled.
This is a good start if you are interested in looking at doing it in PHP:
http://www.intelliot.com/blog/2008/03/sorted-directory-listing-image-resizing-comparison-and-similarity-in-php/
There probably aren't a lot of languages LESS suited to this task than PHP. You should really look for an image comparison library with a C compatible API and figure out how to glue that into your PHP application.
Identical images can be checked with an md5sum, but detecting if somebody uploads a scaled image, which displays the same thing as the other is very hard. This requires digital image processing.
An approach is to scale down all images to a certain width (say 100px). Then check a few coordinates for the color. If another image matches a big part (say 80%), it might be the same image.
But if the image is lighter... this won't work.