function ColorBox(colorRange, total, data) {
this.colorRange = colorRange;
this.total = total;
this.data = data;
this.volume = (colorRange[0][1] - colorRange[0][0]) * (colorRange[1][1] - colorRange[1][0]) * (colorRange[2][1] - colorRange[2][0]);
this.rank = this.total * (this.volume);
}
ColorBox.prototype.getColor = function () {
var total = this.total;
var data = this.data;
var redCount = 0,
greenCount = 0,
blueCount = 0;
for (var i = 0; i < total; i++) {
redCount += data[i * 4];
greenCount += data[i * 4 + 1];
blueCount += data[i * 4 + 2];
}
return [parseInt(redCount / total), parseInt(greenCount / total), parseInt(blueCount / total)];
}
function getCutSide(colorRange) {
var arr = [];
for (var i = 0; i < 3; i++) {
arr.push(colorRange[i][1] - colorRange[i][0]);
}
return arr.indexOf(Math.max(arr[0], arr[1], arr[2]));
}
function cutRange(colorRange, colorSide, cutValue) {
var arr1 = [];
var arr2 = [];
colorRange.forEach(function (item) {
arr1.push(item.slice());
arr2.push(item.slice());
})
arr1[colorSide][1] = cutValue;
arr2[colorSide][0] = cutValue;
return [arr1, arr2];
}
function getMedianColor(colorCountMap, total) {
var arr = [];
for (var key in colorCountMap) {
arr.push({
color: parseInt(key),
count: colorCountMap[key]
})
}
var sortArr = __quickSort(arr);
var medianCount = 0;
var medianColor = 0;
var medianIndex = Math.floor(sortArr.length / 2)
for (var i = 0; i <= medianIndex; i++) {
medianCount += sortArr[i].count;
}
return {
color: parseInt(sortArr[medianIndex].color),
count: medianCount
}
function __quickSort(arr) {
if (arr.length <= 1) {
return arr;
}
var pivotIndex = Math.floor(arr.length / 2),
pivot = arr.splice(pivotIndex, 1)[0];
var left = [],
right = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i].count <= pivot.count) {
left.push(arr[i]);
}
else {
right.push(arr[i]);
}
}
return __quickSort(left).concat([pivot], __quickSort(right));
}
}
function cutBox(colorBox) {
var colorRange = colorBox.colorRange,
cutSide = getCutSide(colorRange),
colorCountMap = {},
total = colorBox.total,
data = colorBox.data;
for (var i = 0; i < total; i++) {
var color = data[i * 4 + cutSide];
if (colorCountMap[color]) {
colorCountMap[color] += 1;
}
else {
colorCountMap[color] = 1;
}
}
var medianColor = getMedianColor(colorCountMap, total);
var cutValue = medianColor.color;
var cutCount = medianColor.count;
var newRange = cutRange(colorRange, cutSide, cutValue);
var box1 = new ColorBox(newRange[0], cutCount, data.slice(0, cutCount * 4)),
box2 = new ColorBox(newRange[1], total - cutCount, data.slice(cutCount * 4))
return [box1, box2];
}
function queueCut(queue, num) {
while (queue.length < num) {
queue.sort(function (a, b) {
return a.rank - b.rank
});
var colorBox = queue.pop();
var result = cutBox(colorBox);
queue = queue.concat(result);
}
return queue.slice(0, num);
}
function getImageData(src) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
context.drawImage(img, 0, 0)
const data = context.getImageData(0, 0, img.width, img.height).data
resolve({ img, data })
}
img.onerror = () => reject(Error('Image loading failed.'))
img.crossOrigin = ''
img.src = src
})
}
function luminance(r, g, b) {
var a = [r, g, b].map((v) => {
v /= 255;
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
});
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function getColors(color) {
const lum1 = luminance(...color);
let result = [];
for (let r = 0; r <= 255; r += 5) {
for (let g = 0; g <= 255; g += 5) {
for (let b = 0; b <= 255; b += 5) {
const lum2 = luminance(r, g, b);
const brightest = Math.max(lum1, lum2);
const darkest = Math.min(lum1, lum2);
if ((brightest + 0.05) / (darkest + 0.05) >= 16) {
result.push([r, g, b]);
}
}
}
}
const step = parseInt(result.length / 4);
const array = [];
for (let i = 0; i < 4; i++) {
array.push(result[i * step]);
}
return array;
}
export default function imageColor(url, callback) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
width = 0,
height = 0,
imageData = null,
length = 0,
blockSize = 1,
cubeArr = [];
getImageData(url).then(({ img, data }) => {
width = canvas.width = img.width;
height = canvas.height = img.height;
imageData = data;
var total = imageData.length / 4;
var rMin = 255,
rMax = 0,
gMin = 255,
gMax = 0,
bMin = 255,
bMax = 0;
for (var i = 0; i < total; i++) {
var red = imageData[i * 4],
green = imageData[i * 4 + 1],
blue = imageData[i * 4 + 2];
if (red < rMin) {
rMin = red;
}
if (red > rMax) {
rMax = red;
}
if (green < gMin) {
gMin = green;
}
if (green > gMax) {
gMax = green;
}
if (blue < bMin) {
bMin = blue;
}
if (blue > bMax) {
bMax = blue;
}
}
var colorRange = [[rMin, rMax], [gMin, gMax], [bMin, bMax]];
var colorBox = new ColorBox(colorRange, total, imageData);
var colorBoxArr = queueCut([colorBox], 8);
var colorArr = [];
for (var j = 0; j < colorBoxArr.length; j++) {
colorBoxArr[j].total && colorArr.push(colorBoxArr[j].getColor())
}
let r = 0, g = 0, b = 0;
colorArr.forEach(c => {
r += c[0];
g += c[1];
b += c[2];
})
const result = getColors([parseInt(r / colorArr.length), parseInt(g / colorArr.length), parseInt(b / colorArr.length)]);
callback(result);
})
}