Image-diff-view NPM

image-diff-view

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

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

Gif image diff view swipe demo Gif image diff view fade 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>