get img color
function getImgColor(img) {
/**
* @ param 传入的图片
* @ this.progress 解析图片的进度 实时
* @ this.canvas canvas元素
* @ this.cvs context对象
* @ this.accuracy Number 解析图片颜色的精确度 1 - 7 数字选择
*
*
* @ anther taoqun <taoquns@foxmail.com>
*/
this.canvas = document.createElement("canvas")
this.canvas.width = img.width
this.canvas.height = img.height
this.cvs = this.canvas.getContext("2d")
this.cvs.drawImage(img, 0, 0)
this.accuracy = 5
this.progress = ''
}
getImgColor.prototype.getColorXY = function(x, y) {
/**
* @param x Number x坐标起点
* @param y Number y坐标起点
* @return color Object 包含颜色的rgba #16进制颜色
*/
let obj = this.cvs.getImageData(x, y, 1, 1)
let arr = obj.data.toString().split(",")
let first = parseInt(arr[0]).toString(16)
first = first.length === 2 ? first : first + first
let second = parseInt(arr[1]).toString(16)
second = second.length === 2 ? second : second + second
let third = parseInt(arr[2]).toString(16)
third = third.length === 2 ? third : third + third
let last = parseInt(arr.pop()) / 255
last = last.toFixed(0)
let color = {}
color['rgba'] = 'rgba(' + arr.join(',') + ',' + last + ')'
color['#'] = '#' + first + second + third
return color
}
getImgColor.prototype.getColors = function() {
/**
* 避免图片过大,阻塞卡死
* 每加载一行像素,延迟20毫秒加载下一行
* return Promise
* promise resolve 解析完成后,返回颜色的总计数组,降序排列
* promise reject none
*/
return (new Promise((resolve, reject) => {
let arr = []
let getY = (i) => {
for(let j = 0; j < this.canvas.height; j++) {
let obj = {}
obj = this.getColorXY(i, j)
obj.index = 1
let is = true
arr.forEach((item) => {
if (item['#'] === obj['#']) {
is = false
item.index += 1
}
let l = []
for (let i = 0; i < obj['#'].length; i++) {
if (item['#'].indexOf(obj['#'][i]) > -1) {
l.push('1')
}
}
let acc = (this.accuracy > 7) ? 7 : this.accuracy
acc = (this.accuracy < 1) ? 2 : this.accuracy
if (l.length > acc) {
is = false
item.index += 1
}
})
if (is) {
arr.push(obj)
}
}
};
let getX = (i) => {
if (i < this.canvas.width) {
getY(i)
this.progress = (i / this.canvas.width * 100).toFixed(2) + '%'
console.log(this.progress)
setTimeout(() => {
getX(++i)
}, 20)
} else {
this.progress = '100%'
console.log( this.progress )
resolve(arr.sort(function(a, b) {
return a.index < b.index ? 1 : (a.index > b.index ? -1 : 0)
}))
}
};
getX(0)
}))
}