image-diff-view

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

Usage no npm install needed!

<script type="module">
  import imageDiffView from 'https://cdn.skypack.dev/image-diff-view';
</script>

README

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>

Dependencies

No dependencies required

Our users

  • Yandex