image-diff-view

Compares images, inspired by Github's image diff view modes.

Inspered by https://github.com/cezary/react-image-diff also (Demo).

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 and demo.

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

<div class='image-diff' id='image-diff'>
  <div class='image-diff__inner'>
    <div class='image-diff__before'><img/></div>
    <div class='image-diff__wrapper'><div class='image-diff__after'><img/></div></div>
  </div>
</div>

Dependencies

No dependencies required

Our users

• Yandex