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

![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`

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