diff --git a/README.md b/README.md index a5a9581..e5743a1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # image-luminosity ## Install ``` -$ npm i --save image-luminosity +$ npm i image-luminosity ``` ## Usage ``` -var imgLum = require('image-luminosity'); -var image = '/directory/to/img'; +import imgLum from 'image-luminosity'; +const image = '/directory/to/img'; imgLum(image, function(value) { console.log(value); diff --git a/index.js b/index.js index d2cda49..847eee2 100644 --- a/index.js +++ b/index.js @@ -1,62 +1,76 @@ -function(imageSrc, callback, dimensions) { - var img = document.createElement("img"); - img.src = imageSrc; - img.style.display = "none"; - document.body.appendChild(img); - - var colorSum = avgR = avgG = avgB = avgA = 0; - - img.onload = function() { - // create canvas - var canvas = document.createElement("canvas"); - var sx,sy,sWidth,sHeight; - canvas.width = this.width; - canvas.height = this.height; - - if (dimensions != null) { - sx = dimensions.sx; - sy = dimensions.sy; - sWidth = dimensions.sWidth; - sHeight = dimensions.sHeight; - } - else { - sx = sy = 0; - sWidth = canvas.width; - sHeight = canvas.height; - } - - var ctx = canvas.getContext("2d"); - ctx.drawImage(this, 0, 0); - - var imageData = ctx.getImageData(sx, sy, sWidth, sHeight); - var data = imageData.data; - var r, g, b, a, avg; - - for (var x = 0, len = data.length; x < len; x += 4) { - r = data[x]; - g = data[x + 1]; - b = data[x + 2]; - a = data[x + 3]; - - avgR += r; - avgG += g; - avgB += b; - avgA += a; - avg = Math.floor((r + g + b) / 3); - colorSum += avg; - } - - function average (int) { - return Math.floor(int / (sWidth * sHeight)); - } - - var values = { - brightness: average(colorSum), - opacity: average(avgA)), - r: average(avgR), - g: average(avgG), - b: average(avgB) - } - callback(values); +/** + * Detects the luminosity and average color values of an image. + * @param {string} imageSource - The source URL of the image. + * @param {function} callback - Callback function to receive the result. + * @param {object} [dimensions] - Optional crop dimensions {sx, sy, sWidth, sHeight}. + */ +const imgLum = (imageSource, callback, dimensions) => { + const img = document.createElement('img'); + img.crossOrigin = 'Anonymous'; // Set this before src + img.src = imageSource; + img.style.display = 'none'; + document.body.appendChild(img); + + let colorSum = 0; + let avgR = 0; + let avgG = 0; + let avgB = 0; + let avgA = 0; + + function cleanup() { + if (img.parentNode) { + img.parentNode.removeChild(img); } -} + } + + img.onload = function () { + const canvas = document.createElement('canvas'); + let sx, sy, sWidth, sHeight; + canvas.width = this.width; + canvas.height = this.height; + + if (dimensions != null) { + ({ sx, sy, sWidth, sHeight } = dimensions); + } else { + sx = sy = 0; + sWidth = canvas.width; + sHeight = canvas.height; + } + + const context = canvas.getContext('2d'); + context.drawImage(this, 0, 0); + + const imageData = context.getImageData(sx, sy, sWidth, sHeight); + const data = imageData.data; + let r, g, b, a, avg; + + for (let x = 0, length_ = data.length; x < length_; x += 4) { + r = data[x]; + g = data[x + 1]; + b = data[x + 2]; + a = data[x + 3]; + + avgR += r; + avgG += g; + avgB += b; + avgA += a; + avg = Math.floor((r + g + b) / 3); + colorSum += avg; + } + + const totalPixels = sWidth * sHeight; + const average = (int) => Math.floor(int / totalPixels); + + const values = { + brightness: average(colorSum), + opacity: average(avgA), + r: average(avgR), + g: average(avgG), + b: average(avgB), + }; + callback(values); + cleanup(); + }; +}; + +export default imgLum;