/*! Fast Average Color | © 2022 Denis Seleznev | MIT License | https://github.com/fast-average-color/fast-average-color */ function toHex(num) { let str = num.toString(16) return str.length === 1 ? '0' + str : str } function arrayToHex(arr) { return '#' + arr.map(toHex).join('') } function isDark(color) { // http://www.w3.org/TR/AERT#color-contrast let result = (color[0] * 299 + color[1] * 587 + color[2] * 114) / 1000 return result < 128 } function prepareIgnoredColor(color) { if (!color) { return [] } return isRGBArray(color) ? color : [color] } function isRGBArray(value) { return Array.isArray(value[0]) } function isIgnoredColor(data, index, ignoredColor) { for (let i = 0; i < ignoredColor.length; i++) { if (isIgnoredColorAsNumbers(data, index, ignoredColor[i])) { return true } } return false } function isIgnoredColorAsNumbers(data, index, ignoredColor) { switch (ignoredColor.length) { case 3: // [red, green, blue] if (isIgnoredRGBColor(data, index, ignoredColor)) { return true } break case 4: // [red, green, blue, alpha] if (isIgnoredRGBAColor(data, index, ignoredColor)) { return true } break case 5: // [red, green, blue, alpha, threshold] if (isIgnoredRGBAColorWithThreshold(data, index, ignoredColor)) { return true } break default: return false } } function isIgnoredRGBColor(data, index, ignoredColor) { // Ignore if the pixel are transparent. if (data[index + 3] !== 255) { return true } if (data[index] === ignoredColor[0] && data[index + 1] === ignoredColor[1] && data[index + 2] === ignoredColor[2]) { return true } return false } function isIgnoredRGBAColor(data, index, ignoredColor) { if (data[index + 3] && ignoredColor[3]) { return data[index] === ignoredColor[0] && data[index + 1] === ignoredColor[1] && data[index + 2] === ignoredColor[2] && data[index + 3] === ignoredColor[3] } // Ignore rgb components if the pixel are fully transparent. return data[index + 3] === ignoredColor[3] } function inRange(colorComponent, ignoredColorComponent, value) { return colorComponent >= (ignoredColorComponent - value) && colorComponent <= (ignoredColorComponent + value) } function isIgnoredRGBAColorWithThreshold(data, index, ignoredColor) { let redIgnored = ignoredColor[0] let greenIgnored = ignoredColor[1] let blueIgnored = ignoredColor[2] let alphaIgnored = ignoredColor[3] let threshold = ignoredColor[4] let alphaData = data[index + 3] let alphaInRange = inRange(alphaData, alphaIgnored, threshold) if (!alphaIgnored) { return alphaInRange } if (!alphaData && alphaInRange) { return true } if (inRange(data[index], redIgnored, threshold) && inRange(data[index + 1], greenIgnored, threshold) && inRange(data[index + 2], blueIgnored, threshold) && alphaInRange) { return true } return false } function dominantAlgorithm(arr, len, options) { let colorHash = {} let divider = 24 let ignoredColor = options.ignoredColor let step = options.step let max = [0, 0, 0, 0, 0] for (let i = 0; i < len; i += step) { let red = arr[i] let green = arr[i + 1] let blue = arr[i + 2] let alpha = arr[i + 3] if (ignoredColor && isIgnoredColor(arr, i, ignoredColor)) { continue } let key = Math.round(red / divider) + ',' + Math.round(green / divider) + ',' + Math.round(blue / divider) if (colorHash[key]) { colorHash[key] = [ colorHash[key][0] + red * alpha, colorHash[key][1] + green * alpha, colorHash[key][2] + blue * alpha, colorHash[key][3] + alpha, colorHash[key][4] + 1 ] } else { colorHash[key] = [red * alpha, green * alpha, blue * alpha, alpha, 1] } if (max[4] < colorHash[key][4]) { max = colorHash[key] } } let redTotal = max[0] let greenTotal = max[1] let blueTotal = max[2] let alphaTotal = max[3] let count = max[4] return alphaTotal ? [ Math.round(redTotal / alphaTotal), Math.round(greenTotal / alphaTotal), Math.round(blueTotal / alphaTotal), Math.round(alphaTotal / count) ] : options.defaultColor } function simpleAlgorithm(arr, len, options) { let redTotal = 0 let greenTotal = 0 let blueTotal = 0 let alphaTotal = 0 let count = 0 let ignoredColor = options.ignoredColor let step = options.step for (let i = 0; i < len; i += step) { let alpha = arr[i + 3] let red = arr[i] * alpha let green = arr[i + 1] * alpha let blue = arr[i + 2] * alpha if (ignoredColor && isIgnoredColor(arr, i, ignoredColor)) { continue } redTotal += red greenTotal += green blueTotal += blue alphaTotal += alpha count++ } return alphaTotal ? [ Math.round(redTotal / alphaTotal), Math.round(greenTotal / alphaTotal), Math.round(blueTotal / alphaTotal), Math.round(alphaTotal / count) ] : options.defaultColor } function sqrtAlgorithm(arr, len, options) { let redTotal = 0 let greenTotal = 0 let blueTotal = 0 let alphaTotal = 0 let count = 0 let ignoredColor = options.ignoredColor let step = options.step for (let i = 0; i < len; i += step) { let red = arr[i] let green = arr[i + 1] let blue = arr[i + 2] let alpha = arr[i + 3] if (ignoredColor && isIgnoredColor(arr, i, ignoredColor)) { continue } redTotal += red * red * alpha greenTotal += green * green * alpha blueTotal += blue * blue * alpha alphaTotal += alpha count++ } return alphaTotal ? [ Math.round(Math.sqrt(redTotal / alphaTotal)), Math.round(Math.sqrt(greenTotal / alphaTotal)), Math.round(Math.sqrt(blueTotal / alphaTotal)), Math.round(alphaTotal / count) ] : options.defaultColor } function getDefaultColor(options) { return getOption(options, 'defaultColor', [0, 0, 0, 0]) } function getOption(options, name, defaultValue) { return (options[name] === undefined ? defaultValue : options[name]) } let MIN_SIZE = 10 let MAX_SIZE = 100 function isSvg(filename) { return filename.search(/\.svg(\?|$)/i) !== -1 } function getOriginalSize(resource) { if (isInstanceOfHTMLImageElement(resource)) { let width = resource.naturalWidth let height = resource.naturalHeight // For SVG images with only viewBox attribute if (!resource.naturalWidth && isSvg(resource.src)) { width = height = MAX_SIZE } return { width: width, height: height, } } if (isInstanceOfHTMLVideoElement(resource)) { return { width: resource.videoWidth, height: resource.videoHeight } } return { width: resource.width, height: resource.height } } function getSrc(resource) { if (isInstanceOfHTMLCanvasElement(resource)) { return 'canvas' } if (isInstanceOfOffscreenCanvas(resource)) { return 'offscreencanvas' } if (isInstanceOfImageBitmap(resource)) { return 'imagebitmap' } return resource.src } function isInstanceOfHTMLImageElement(resource) { return typeof HTMLImageElement !== 'undefined' && resource instanceof HTMLImageElement } let hasOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' function isInstanceOfOffscreenCanvas(resource) { return hasOffscreenCanvas && resource instanceof OffscreenCanvas } function isInstanceOfHTMLVideoElement(resource) { return typeof HTMLVideoElement !== 'undefined' && resource instanceof HTMLVideoElement } function isInstanceOfHTMLCanvasElement(resource) { return typeof HTMLCanvasElement !== 'undefined' && resource instanceof HTMLCanvasElement } function isInstanceOfImageBitmap(resource) { return typeof ImageBitmap !== 'undefined' && resource instanceof ImageBitmap } function prepareSizeAndPosition(originalSize, options) { let srcLeft = getOption(options, 'left', 0) let srcTop = getOption(options, 'top', 0) let srcWidth = getOption(options, 'width', originalSize.width) let srcHeight = getOption(options, 'height', originalSize.height) let destWidth = srcWidth let destHeight = srcHeight if (options.mode === 'precision') { return { srcLeft: srcLeft, srcTop: srcTop, srcWidth: srcWidth, srcHeight: srcHeight, destWidth: destWidth, destHeight: destHeight } } let factor if (srcWidth > srcHeight) { factor = srcWidth / srcHeight destWidth = MAX_SIZE destHeight = Math.round(destWidth / factor) } else { factor = srcHeight / srcWidth destHeight = MAX_SIZE destWidth = Math.round(destHeight / factor) } if (destWidth > srcWidth || destHeight > srcHeight || destWidth < MIN_SIZE || destHeight < MIN_SIZE) { destWidth = srcWidth destHeight = srcHeight } return { srcLeft: srcLeft, srcTop: srcTop, srcWidth: srcWidth, srcHeight: srcHeight, destWidth: destWidth, destHeight: destHeight } } let isWebWorkers = typeof window === 'undefined' function makeCanvas() { if (isWebWorkers) { return hasOffscreenCanvas ? new OffscreenCanvas(1, 1) : null } return document.createElement('canvas') } let ERROR_PREFIX = 'FastAverageColor: ' function getError(message) { return Error(ERROR_PREFIX + message) } function outputError(error, silent) { if (!silent) { console.error(error) } } let FastAverageColor = /** @class */ (function () { function FastAverageColor() { this.canvas = null this.ctx = null } /** * Get asynchronously the average color from not loaded image. */ FastAverageColor.prototype.getColorAsync = function (resource, options) { if (!resource) { return Promise.reject(getError('call .getColorAsync() without resource.')) } if (typeof resource === 'string') { // Web workers if (typeof Image === 'undefined') { return Promise.reject(getError('resource as string is not supported in this environment')) } let img = new Image() img.crossOrigin = options && options.crossOrigin || '' img.src = resource return this.bindImageEvents(img, options) } else if (isInstanceOfHTMLImageElement(resource) && !resource.complete) { return this.bindImageEvents(resource, options) } else { let result = this.getColor(resource, options) return result.error ? Promise.reject(result.error) : Promise.resolve(result) } } /** * Get the average color from images, videos and canvas. */ FastAverageColor.prototype.getColor = function (resource, options) { options = options || {} let defaultColor = getDefaultColor(options) if (!resource) { let error = getError('call .getColor(null) without resource') outputError(error, options.silent) return this.prepareResult(defaultColor, error) } let originalSize = getOriginalSize(resource) let size = prepareSizeAndPosition(originalSize, options) if (!size.srcWidth || !size.srcHeight || !size.destWidth || !size.destHeight) { let error = getError("incorrect sizes for resource \"".concat(getSrc(resource), "\"")) outputError(error, options.silent) return this.prepareResult(defaultColor, error) } if (!this.canvas) { this.canvas = makeCanvas() if (!this.canvas) { let error = getError('OffscreenCanvas is not supported in this browser') outputError(error, options.silent) return this.prepareResult(defaultColor, error) } } if (!this.ctx) { this.ctx = this.canvas.getContext('2d', { willReadFrequently: true }) if (!this.ctx) { let error = getError('Canvas Context 2D is not supported in this browser') outputError(error, options.silent) return this.prepareResult(defaultColor) } this.ctx.imageSmoothingEnabled = false } this.canvas.width = size.destWidth this.canvas.height = size.destHeight try { this.ctx.clearRect(0, 0, size.destWidth, size.destHeight) this.ctx.drawImage(resource, size.srcLeft, size.srcTop, size.srcWidth, size.srcHeight, 0, 0, size.destWidth, size.destHeight) let bitmapData = this.ctx.getImageData(0, 0, size.destWidth, size.destHeight).data return this.prepareResult(this.getColorFromArray4(bitmapData, options)) } catch (originalError) { let error = getError("security error (CORS) for resource ".concat(getSrc(resource), ".\nDetails: https://developer.mozilla.org/en/docs/Web/HTML/CORS_enabled_image")) outputError(error, options.silent) !options.silent && console.error(originalError) return this.prepareResult(defaultColor, error) } } /** * Get the average color from a array when 1 pixel is 4 bytes. */ FastAverageColor.prototype.getColorFromArray4 = function (arr, options) { options = options || {} let bytesPerPixel = 4 let arrLength = arr.length let defaultColor = getDefaultColor(options) if (arrLength < bytesPerPixel) { return defaultColor } let len = arrLength - arrLength % bytesPerPixel let step = (options.step || 1) * bytesPerPixel let algorithm switch (options.algorithm || 'sqrt') { case 'simple': algorithm = simpleAlgorithm break case 'sqrt': algorithm = sqrtAlgorithm break case 'dominant': algorithm = dominantAlgorithm break default: throw getError("".concat(options.algorithm, " is unknown algorithm")) } return algorithm(arr, len, { defaultColor: defaultColor, ignoredColor: prepareIgnoredColor(options.ignoredColor), step: step }) } /** * Get color data from value ([r, g, b, a]). */ FastAverageColor.prototype.prepareResult = function (value, error) { let rgb = value.slice(0, 3) let rgba = [value[0], value[1], value[2], value[3] / 255] let isDarkColor = isDark(value) return { value: [value[0], value[1], value[2], value[3]], rgb: 'rgb(' + rgb.join(',') + ')', rgba: 'rgba(' + rgba.join(',') + ')', hex: arrayToHex(rgb), hexa: arrayToHex(value), isDark: isDarkColor, isLight: !isDarkColor, error: error, } } /** * Destroy the instance. */ FastAverageColor.prototype.destroy = function () { if (this.canvas) { this.canvas.width = 1 this.canvas.height = 1 this.canvas = null } this.ctx = null } FastAverageColor.prototype.bindImageEvents = function (resource, options) { let _this = this return new Promise(function (resolve, reject) { let onload = function () { unbindEvents() let result = _this.getColor(resource, options) if (result.error) { reject(result.error) } else { resolve(result) } } let onerror = function () { unbindEvents() reject(getError("Error loading image \"".concat(resource.src, "\"."))) } let onabort = function () { unbindEvents() reject(getError("Image \"".concat(resource.src, "\" loading aborted"))) } let unbindEvents = function () { resource.removeEventListener('load', onload) resource.removeEventListener('error', onerror) resource.removeEventListener('abort', onabort) } resource.addEventListener('load', onload) resource.addEventListener('error', onerror) resource.addEventListener('abort', onabort) }) } return FastAverageColor }()) export default FastAverageColor