https://github.com/a-x-/image-diff-view
Compares images (written with vanilla js), inspired by Github's image diff view modes. Demo: http://mxtnr.ru/image-diff-view/,
https://github.com/a-x-/image-diff-view
Last synced: 28 days ago
JSON representation
Compares images (written with vanilla js), inspired by Github's image diff view modes. Demo: http://mxtnr.ru/image-diff-view/,
- Host: GitHub
- URL: https://github.com/a-x-/image-diff-view
- Owner: a-x-
- License: mit
- Created: 2016-05-15T12:22:20.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-21T08:27:56.000Z (almost 9 years ago)
- Last Synced: 2024-10-02T08:27:50.590Z (8 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/image-diff-view
- Size: 493 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# image-diff-view
Compares images, inspired by Github's [image diff view modes](https://github.com/blog/817-behold-image-view-modes).Inspered by https://github.com/cezary/react-image-diff also ([Demo](http://cezary.github.io/react-image-diff/)).

## Modes
* `difference` (classic diff)
* `fade` (onion skin)
* `swipe`## Usage
Controls are not delivery out of the box.
You are free to implement your unique diff controls.`npm install image-diff-view`
Checkout [example](https://github.com/a-x-/image-diff-view/blob/master/example/index.html) and [demo](https://github.com/a-x-/a-x-.github.io/blob/master/image-diff-view/index.html).
```js
import ImageDiff from 'image-diff-view';var beforeUrl = 'http://cezary.github.io/react-image-diff/public/img/spot-the-difference-a.jpg',
afterUrl = 'http://cezary.github.io/react-image-diff/public/img/spot-the-difference-b.jpg';var imageDiff = new ImageDiff(document.getElementById('image-diff'), beforeUrl, afterUrl, 'swipe');
imageDiff.swipe(0.5);
imageDiff.update(beforeUrl, afterUrl, 'fade');
imageDiff.fade(0.8);
imageDiff.tune(0.4); // abstract tune method rather than fade/swipe()
```
```html
```## Dependencies
No dependencies required## Our users
* Yandex