Newer
Older
pixi.js / test / renders / lib / ImageDiff.js
@Matt Karl Matt Karl on 16 Nov 2016 1 KB 4.2.1
'use strict';

/**
 * Compare images
 * @class ImageDiff
 */
class ImageDiff
{
    /**
     * @constructor
     * @param {int} width Width of the canvas
     * @param {int} height Height of the canvas
     * @param {Number} tolerance Tolerance for difference
     */
    constructor(width, height, tolerance)
    {
        this.width = width;
        this.height = height;
        this.tolerance = tolerance;

        const canvas = document.createElement('canvas');

        canvas.width = width;
        canvas.height = height;
        this.context = canvas.getContext('2d', {
            antialias: false,
            preserveDrawingBuffer: true,
        });
    }

    /**
     * Compare two base64 images
     * @method compare
     * @param {string} src1 Canvas source
     * @param {string} src2 Canvas source
     * @return {Boolean} If images are within tolerance
     */
    compare(src1, src2)
    {
        const a = this.getImageData(src1);
        const b = this.getImageData(src2);
        const len = a.length;
        const tolerance = this.tolerance;

        const diff = a.filter(function (val, i)
        {
            return Math.abs(val - b[i]) / 255 > tolerance;
        });

        if (diff.length / len > tolerance)
        {
            return false;
        }

        return true;
    }

    /**
     * Get an array of pixels
     * @method getImageData
     * @param {string} src Source of the image
     * @return {Uint8ClampedArray} Data for image of pixels
     */
    getImageData(src)
    {
        const image = new Image();

        image.src = src;
        this.context.clearRect(0, 0, this.width, this.height);
        this.context.drawImage(image, 0, 0, this.width, this.height);
        const imageData = this.context.getImageData(0, 0, this.width, this.height);

        return imageData.data;
    }
}

module.exports = ImageDiff;