Diffing Images In Vanilla JavaScript – Image Diff View

Category: Image , Javascript | May 26, 2016
Author: a-x-
Views Total: 2,605
Official Page: Go to website
Last Update: May 26, 2016
License: MIT

Preview:

Diffing Images In Vanilla JavaScript – Image Diff View

Description:

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');

You Might Be Interested In:

Leave a Reply