<commit_before># 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/)).

![Gif image diff view swipe demo](https://github.com/cezary/react-image-diff/raw/master/public/img/demo-swipe.gif)
![Gif image diff view fade demo](https://github.com/cezary/react-image-diff/raw/master/public/img/demo-fade.gif)

## 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`

```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);
```

## Dependencies
No dependencies required

## Our users
* Yandex<commit_msg>Update README example<commit_after># 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/)).

![Gif image diff view swipe demo](https://github.com/cezary/react-image-diff/raw/master/public/img/demo-swipe.gif)
![Gif image diff view fade demo](https://github.com/cezary/react-image-diff/raw/master/public/img/demo-fade.gif)

## 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`

```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()
```

## Dependencies
No dependencies required

## Our users
* Yandex
{'fraction_non_alphanumeric': 0.16134185303514376, 'fraction_numerical': 0.006389776357827476, 'mean_word_length': 4.798611111111111, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '152603', 'n_tokens_mistral': 894, 'n_tokens_neox': 855, 'n_words': 180}