image-diff-view

1.2.0 • Public • Published

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

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i image-diff-view

      Weekly Downloads

      3

      Version

      1.2.0

      License

      MIT

      Last publish

      Collaborators

      • invntrm