https://github.com/captaincodeman/image-compare
Image comparison element
https://github.com/captaincodeman/image-compare
Last synced: 11 months ago
JSON representation
Image comparison element
- Host: GitHub
- URL: https://github.com/captaincodeman/image-compare
- Owner: CaptainCodeman
- Created: 2016-10-11T13:29:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-10-11T14:03:27.000Z (over 9 years ago)
- Last Synced: 2025-01-08T14:15:28.604Z (about 1 year ago)
- Language: HTML
- Homepage: http://captaincodeman.github.io/image-compare/
- Size: 2.88 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
_[Demo and API docs](http://captaincodeman.github.io/image-compare/)_
##<image-compare>
`image-compare` enables visual comparison of images by swiping between them.
**Status**: *Experimental / Work in progress, likely only works in Chrome*
Unlike most other image comparison libraries which simply provide a before and
after comparison, this was designed for comparing images in detail (specifically
as a visual aid while working on an upload component that provides image resizing,
sharpening, and re-encoding as Jpeg or WePp). It allows zooming and scrolling so
that areas of an image can be compared in detail and smoothing is disabled to the
pixel-level differences between them can be clearly examined.
Both images are also loaded using `![]()
` elements instead of a `background-image`
of a `
` to avoid the flickering that the latter introduced when viewing large
images.
Example of use:
NOTE: Both images should be the same dimensions.
Source images / some styling based on [this article](https://codyhouse.co/gem/css-jquery-image-comparison-slider/)