JavaScript实现简单获取本地图片主色调

 更新时间:2023年03月07日 10:05:06   作者:头疼脑胀的代码搬运工  
想象一个场景,就是如何根据一张图片大概提取出它的主色调呢?获取主色调后,可能会用来设置某些背景颜色,这里,利用 JS 简单获取本地图片主色调,希望对大家有所帮助

一、实现效果

鲜花

大海

森林

二、实现

1、实现思路

其实思路很简单,就是将一张大图先缩小为一张小图,再遍历里面的像素,找到出现次数相对较高的一个;当然,先说明一下,这个也只能实现一个提取近似的值或者跟“人的意识”相反的值,因此,最终结果的“满意程度”可能不是很好。

2、实现代码

创建一个 ThemeColor 操作对象,通过回调返回缩略图主色调 ,可进行相关的其他操作

//本地图片资源
let url = 'tree.webp'
document.getElementById('originalImage').src = url
let 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实现简单获取本地图片主色调的详细内容,更多关于JavaScript获取图片主色调的资料请关注脚本之家其它相关文章!

相关文章

  • javascript 有用的脚本函数

    javascript 有用的脚本函数

    大家注意看下,感觉应该是批量给网页的一些标签加样式的函数。
    2009-05-05
  • JS中的public和private对象,即static修饰符

    JS中的public和private对象,即static修饰符

    先看下面的例子,它将告诉我们在JS世界中也有C#里的public , private ,及static等
    2012-01-01
  • 使用JS读取XML文件的方法

    使用JS读取XML文件的方法

    由于项目上需要解析xml,于是各种百度,然后自己总结了下各个主流浏览器解析xml的方法,下面通过本文给大家详细介绍下使用JS读取XML文件的方法,一起看看吧
    2016-11-11
  • 使用js操作cookie的一点小收获分享

    使用js操作cookie的一点小收获分享

    js操作cookie想必大家并不陌生吧,本文积累了一点小经验,在此与大家分享下,希望对大家有所帮助
    2013-09-09
  • Javascript blur与click冲突解决办法

    Javascript blur与click冲突解决办法

    这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况,这里举了几个例子,和解决办法,需要的朋友可以参考下
    2017-01-01
  • JavaScript鼠标禁止右键禁止打开控制台及键盘禁用

    JavaScript鼠标禁止右键禁止打开控制台及键盘禁用

    这篇文章主要给大家介绍了关于JavaScript鼠标禁止右键禁止打开控制台及键盘禁用的相关资料,实现禁止右键和禁止打开控制台是一种常见的网页保护技巧,可以防止非法复制、盗取网页资源等安全问题,需要的朋友可以参考下
    2023-10-10
  • JavaScript实现微信飞机大战游戏

    JavaScript实现微信飞机大战游戏

    这篇文章主要为大家详细介绍了JavaScript实现微信飞机大战游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 深入学习JavaScript中的promise

    深入学习JavaScript中的promise

    这篇文章主要介绍了深入学习JavaScript中的promise,Promise对象的主要⽤途是通过链式调⽤的结构,将原本回调嵌套的异步处理流程,转化成“对象.then().then()...”的链式结构
    2022-06-06
  • js实现一键复制功能

    js实现一键复制功能

    本文主要介绍了js实现一键复制功能的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • WordPress中利用AJAX异步获取评论用户头像的方法

    WordPress中利用AJAX异步获取评论用户头像的方法

    这篇文章主要介绍了WordPress中利用AJAX异步获取评论用户头像的方法,文中的例子是输入邮箱即可获取头像,需要的朋友可以参考下
    2016-01-01

最新评论