Get average color from image

get-average-color.js

(function (root) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext && canvas.getContext('2d');
    var DEFAULT_RGB = { r: 0, g: 0, b: 0 };

    function extractRGB(imageData) {
        var len = imageData.data.length;
        var rgb = { r: 0, g: 0, b: 0 };
        var blockSize = 5; // Check every 5 pixels
        var i = -4;
        var count = 0;

        while ((i += blockSize * 4) < len) {
            ++count;
            rgb.r += imageData.data[i];
            rgb.g += imageData.data[i + 1];
            rgb.b += imageData.data[i + 2];
        }

        rgb.r = Math.floor(rgb.r / count);
        rgb.g = Math.floor(rgb.g / count);
        rgb.b = Math.floor(rgb.b / count);

        return rgb;
    }

    function drawImage($image, cb) {
        var height = canvas.height = $image.naturalHeight || $image.offsetHeight || $image.height;
        var width = canvas.width = $image.naturalWidth || $image.offsetWidth || $image.width;
        var img = new Image();

        img.onload = function () {
            context.drawImage(this, 0, 0);
            var data = context.getImageData(0, 0, width, height);
            cb(data);
        }
        img.crossOrigin = 'Anonymous';
        img.src = $image.src;
    }

    function extractAverageRGB($image) {
        return new Promise(function (resolve, reject) {
            drawImage($image, function (imageData) {
                resolve(extractRGB(imageData));
            });
        });
    }

    // Expose API
    root.extractAverageRGB = extractAverageRGB;
})(window);