«

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

时间:2024-8-4 06:36     作者:韩俊     分类: Javascript


本篇内容介绍了“JavaScript如何实现简单获取本地图片主色调”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

    实现

    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

    热门推荐