Diffing Images In Vanilla JavaScript – Image Diff View

Image Diff View is a vanilla JavaScript library for comparing differences between two images with the following modes:

• difference
• onion skin: view differences of your images with a fade effect.
• swipe: view portions of your images side by side.

Basic usage:

Load the required JS and CSS files in the html file.

<link rel='stylesheet' href='index.css'>
<script src='index.js'></script>

The html structure for the image comparison interface.

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

Specify the images you want to compare.

var beforeUrl = 'before.jpg',
    afterUrl = 'after.jpg';

Create a new ImageDiff object and specify the mode you want to use.

var imageDiff = new ImageDiff(document.getElementById('image-diff'), beforeUrl, afterUrl, 'swipe');