112 lines
3.1 KiB
JavaScript
112 lines
3.1 KiB
JavaScript
class ThemeColor {
|
|
// 原图资源
|
|
imgUrl = ''
|
|
// 像素集合
|
|
originalPiexls = null
|
|
// 缩略图
|
|
shrinkUrl = ''
|
|
// 主色
|
|
themeColor = 'white'
|
|
// 回调
|
|
themeColorCallBack = null
|
|
// 提取像素出现最大次数操作对象
|
|
colorCountedSet = new ColorCountedSet()
|
|
|
|
constructor(imgUrl, callBack) {
|
|
this.imgUrl = imgUrl
|
|
this.themeColorCallBack = callBack
|
|
this.startScreeningThemeColor()
|
|
}
|
|
|
|
// 开始解析主色
|
|
async startScreeningThemeColor() {
|
|
try {
|
|
await this.shrinkImage()
|
|
} catch (error) {
|
|
console.log('error:' + error)
|
|
}
|
|
this.screeningThemeColor()
|
|
}
|
|
|
|
// 图片缩小
|
|
async shrinkImage() {
|
|
var image = new Image();
|
|
image.src = this.imgUrl;
|
|
await new Promise((resolve) => {
|
|
image.onload = resolve
|
|
})
|
|
let width = image.width
|
|
let height = image.height
|
|
let shrinkFactor = 10
|
|
let shrinkWidth = width / shrinkFactor
|
|
let shrinkHeight = height / shrinkFactor
|
|
let canvas = document.createElement('canvas')
|
|
canvas.setAttribute('width', `${shrinkWidth}px`)
|
|
canvas.setAttribute('height', `${shrinkHeight}px`)
|
|
var ctx = canvas.getContext("2d")
|
|
ctx.drawImage(image, 0, 0, shrinkWidth, shrinkHeight)
|
|
this.shrinkUrl = canvas.toDataURL('image/jpeg', 1)
|
|
try {
|
|
//保存像素
|
|
this.originalPiexls = ctx.getImageData(0, 0, width, height)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
// 开始筛选主题色
|
|
screeningThemeColor() {
|
|
if (!this.originalPiexls || !this.originalPiexls.data || this.originalPiexls.data.length == 0) {
|
|
throw ('像素为空')
|
|
}
|
|
for (let i = 0; i < this.originalPiexls.data.length; i += 4) {
|
|
let r = this.originalPiexls.data[i]
|
|
let g = this.originalPiexls.data[i + 1]
|
|
let b = this.originalPiexls.data[i + 2]
|
|
let a = this.originalPiexls.data[i + 3] / 255.0
|
|
//添加一个色值范围，让它能忽略一定无效的像素值
|
|
if (a > 0 && (r < 200 && g < 200 && b < 200) && (r > 50 && g > 50 && b > 50)) {
|
|
this.colorCountedSet.push(r, g, b, a)
|
|
}
|
|
}
|
|
|
|
let maxCount = 0
|
|
// 寻找出现次数最多的像素定为主色调
|
|
this.colorCountedSet.forEach((value, key) => {
|
|
if (maxCount <= value) {
|
|
maxCount = value
|
|
this.themeColor = 'rgba(' + key + ')'
|
|
}
|
|
})
|
|
//执行回调
|
|
if (this.themeColorCallBack) {
|
|
this.themeColorCallBack(this.shrinkUrl, this.themeColor)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 统计不同像素的出现次数
|
|
class ColorCountedSet {
|
|
//像素集合
|
|
map = new Map()
|
|
|
|
//添加像素到集合
|
|
push(r, g, b, a) {
|
|
//根据像素值生成一个map 元素 key值
|
|
let identification = r + ',' + g + ',' + b + ',' + a
|
|
if (!this.map.get(identification)) {
|
|
this.map.set(identification, 1)
|
|
} else {
|
|
// 存在进行次数自增
|
|
let times = parseInt(this.map.get(identification)) + 1
|
|
this.map.set(identification, times)
|
|
}
|
|
}
|
|
|
|
// 给 ColorCountedSet 操作类添加一个 forEach 方法
|
|
forEach(cb) {
|
|
this.map.forEach(function(value, key) {
|
|
cb(value, key)
|
|
});
|
|
}
|
|
} |