Compares images, inspired by Github's image diff view modes.
Inspered by https://github.com/cezary/react-image-diff also (Demo).
-
difference(classic diff) -
fade(onion skin) swipe
Controls are not delivery out of the box. You are free to implement your unique diff controls.
npm install image-diff-view
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>No dependencies required
- Yandex
