Image diffing using JavaScript

diff.js

const avgDiff = (canvas) => {
    let context = canvas.getContext('2d');
    let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    let data = imageData.data;

    let sum = 0;
    let count = 0;

    // TODO: perhaps this can be sped up by not going over every pixel?
    for (let i = 0; i < data.length; i += 4) {
        sum += Math.abs(128 - data[i]);     // red
        sum += Math.abs(128 - data[i + 1]); // green
        sum += Math.abs(128 - data[i + 2]); // blue
        // skipping alpha

        count += 3;
    }

    return sum / count;
};

const invert = (canvas) => {
    let context = canvas.getContext('2d');
    let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    let data = imageData.data;

    // Invert rgb data
    for (let i = 0; i < data.length; i += 4) {
        data[i]     = 255 - data[i];     // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
        // skipping alpha
    }

    // Overwrite original image
    context.putImageData(imageData, 0, 0);
};

module.exports = (sources) => {
    // *** Setup ***
    let canvas1 = document.createElement('canvas');
    let canvas2 = document.createElement('canvas');

    // DEBUG
    // document.body.appendChild(canvas1);
    // document.body.appendChild(canvas2);

    let context1 = canvas1.getContext('2d');
    let context2 = canvas2.getContext('2d');

    let results = [];
    let promises = [];

    console.time('diff');
    console.info('diffing!');

    for (i = 0; i < sources.length - 1; i += 1) {
        let p1 = new Promise((resolve, reject) => {
            var image = document.createElement('img');
            image.src = sources[i];
            image.onload = e => {
                canvas1.width = image.width;
                canvas1.height = image.height;
                context1.drawImage(image, 0, 0);
                resolve();
            };
            image.onerror = e => {
                reject();
            };
        });

        let p2 = new Promise((resolve, reject) => {
            var image = document.createElement('img');
            image.src = sources[i + 1];
            image.onload = e => {
                context2.globalAlpha = 1;   // Reset alpha channel
                canvas2.width = image.width;
                canvas2.height = image.height;
                context2.drawImage(image, 0, 0);
                resolve();
            };
            image.onerror = e => {
                reject();
            };
        });

        let p3 = Promise.all([p1, p2]).then(() => {
            // Invert 1st image
            invert(canvas1);

            // Layer 1st image over 2nd image
            context2.globalAlpha = 0.5; // This value influences shapes/images drawn to the context
            context2.drawImage(canvas1, 0, 0, canvas1.width, canvas1.height);

            // Get diff from average
            results.push(avgDiff(canvas2));
        });

        promises.push(p3);
    }

    return Promise.all(promises).then(() => {
        console.timeEnd('diff');
        console.info('end diff');
        return results;
    });
};