JSFiddle - React, Tailwind, and code Playground

by vinayaknb

HTML

<script src="http://humblesoftware.github.io/js-imagediff/js/imagediff.js"></script>

CSS

body {
    -webkit-transform: scale(10);
    -webkit-transform-origin: top left;
    transform: scale(10);
    transform-origin: top left;
}
img, canvas {
    vertical-align: middle;
    padding: 2px;
}

JavaScript

var oldImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAACCAYAAABhYU3QAAAAEUlEQVQImWNgYPj/nzhMpEIAOmwn2ahM9dYAAAAASUVORK5CYII=',
    newImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJklEQVQYlWNgIBH8J0buPxJmwMH+j6ELj4n//xOHiVc4gJ4hDgAAxZQ/wSBs0YYAAAAASUVORK5CYII=';

function loadImage(src, callback) {
    var image = new Image();
    image.onload = function () {
        callback(image);
    }
    image.src = src;
}

function createCanvas(imageData) {
    var canvas = document.createElement('canvas');
    canvas.width = imageData.width;
    canvas.height = imageData.height;
    canvas.getContext("2d").putImageData(imageData, 0, 0);
    return canvas;
}

loadImage(oldImage, function(oldImg) {
    document.body.appendChild(oldImg);
    loadImage(newImage, function(newImg) {
        document.body.appendChild(newImg);
        var canvas = createCanvas(imagediff.diff(oldImg, newImg));
        document.body.appendChild(canvas);
    });
});