Last active
January 14, 2019 01:36
-
-
Save southill/01493ff200d2bddb8ea819b24f6db557 to your computer and use it in GitHub Desktop.
get img color
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
})) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment