Image compare script with select boxes and diff
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I would like to get a page that will let me do something like this

http://demosthenes.info/blog/819/A-Before-And-After-Image-Comparison-Slide-Control-in-HTML5

but have 2 select boxes to choose the image on the left and the image on the right. In the html or js i would like to be able to give a full url path to the image, and a name. the name to be used in the selection. We would have different lists for the items in the left vs right select box.

After choosing the 2 images I can then slide back and forth and visual tell the difference but i would also like a button below this image slider to run a canvas compare of the selected images maybe using this script http://huddle.github.io/Resemble.js/

If possible lets use bootstrap for the container of the demo

Hi, By "give a full url path to the image", do you mean you want to load the images from remote URL, or upload with a form?
dave-irvine over 4 years ago
remote url - good question
Qdev over 4 years ago
awarded to dekkard
Tags
javascript

Crowdsource coding tasks.

2 Solutions


Ok, first pass:

https://www.daveirvine.me/bountify/image-compare-script-with-select-boxes-and-diff/

Haven't used bootstrap or tried to style this in any way, just getting the basic code working.

Tell me how closely this meets your requirements and I'll adjust.

The compare button seems to throw a cross origin error - any ideas?
Qdev over 4 years ago
On my demo or have you made a copy?
dave-irvine over 4 years ago
Winning solution

Here's my solution with bootstrap and both comparison methods:

https://app.box.com/s/94aea0kj9ax0rieyh9afcgq2erqnj88w

Usage:

  • First enter an image URL in "Select original image"/"Select modified image" input and hit Add.
    The image will be added to the corresponding image list.

  • Add the second image into the opposite list the same way.

  • Choose the images you want to compare in both lists.

  • Hit Compare at the bottom of the page. The result will be shown in the center of the page.

  • Use the buttons/tabs at the top right to switch between comparison methods.

As usual, don't hesitate to let me know if there's anything to explain or improve.

Here are 3 screenshots of what it looks like: http://imgur.com/tZww51B,CUobAJu,vJwsJwe
dekkard over 4 years ago
I seem to be getting an issue where the background image is sizing different than the overlay image as seen here http://screencast.com/t/Pt705Dm4b4 any ideas?
Qdev over 4 years ago
Hm.. can you send me the URLs of the images you're comparing?
dekkard over 4 years ago
Updated the solution, the link is the same.
dekkard over 4 years ago
Hi, did it work for you or you need any assistance?
dekkard over 4 years ago
View Timeline