Diffing Images In Vanilla JavaScript – Image Diff View

Category: Image , Javascript | May 26, 2016
Views Total:1,391 views
Official Page:Go to website
Last Update:May 26, 2016


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'>
    <div class='image-diff__wrapper'>
      <div class='image-diff__after'>

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