本篇内容介绍了“JavaScript如何实现简单获取本地图片主色调”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
实现
1、实现思路
其实思路很简单，就是将一张大图先缩小为一张小图，再遍历里面的像素，找到出现次数相对较高的一个；当然，先说明一下，这个也只能实现一个提取近似的值或者跟“人的意识”相反的值，因此，最终结果的“满意程度”可能不是很好。
2、实现代码
创建一个 ThemeColor 操作对象，通过回调返回缩略图、主色调 ，可进行相关的其他操作
//本地图片资源let url = 'tree.webp'document.getElementById('originalImage').src = urllet themeColor = new ThemeColor(url,(shrinkUrl,color)=>{ //缩略图 let img = document.getElementById('showImage') if(img){ img.setAttribute('src',shrinkUrl) } //主色 document.getElementById('showDiv').style.backgroundColor = color})ThemeColor.js
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) }); }}“JavaScript如何实现简单获取本地图片主色调”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
