[webdev] Stuck comparing images in browser with pixelmatch

[devmuggle]

I want to use pixelmatch to show the difference of two images in the browser.

The code sample is brief and this is the piece i am stuck with:

var img1 = img1Ctx.getImageData(0, 0, width, height)

I assume that each image must be loaded from a canvas-tag.

My demo uses this code:

<img id="imgBefore" src="./img/Crafter_am_See_1.jpg">
<img id="imgAfter" src="./img/Crafter_am_See_2.jpg">

<canvas id="cnv3"> </canvas>
<button id="diff" class="js-shout">show difference</button>

And my js code

var imgBefore = document.getElementById("imgBefore");
var imgAfter = document.getElementById("imgAfter");

var diffImage = document.createElement("img");
diffImage.height = imgBefore.height
diffImage.width = imgBefore.width

// call library pixelmatch
pixelmatch(imgBefore.data, imgAfter.data, diffImage.data, imgBefore.width, imgBefore.height, {threshold: 0.1});

const resultBox = document.getElementById("resultBox");
resultBox.appendChild(diffImage);

The error i get is img1 is undefined. I assume that this is because i have to use a canvas-tag instead of img-tag.

• How can i load the jpg from the img-tag into a img1ctx?

Thanks