一行代码实现将图片中指定颜色替换功能

最新推荐文章于 2024-07-23 18:21:52 发布

百劼_欣成

最新推荐文章于 2024-07-23 18:21:52 发布

阅读量185

点赞数 3

文章标签： html5 javascript node.js vue.js

本文链接：https://blog.csdn.net/2201_75933297/article/details/138651111

版权

1、作用

可以帮您将图片中某一种颜色全部替换为另一种颜色。

2、优势

您只需要传入几个参数即可实现。

3、源码(main.js)

/**
 * @param {Element} img_dom -img节点,要处理的图片
 * @param {Array} color_arr -要被替换的颜色的数组，数组里的所有值为 rgb,例rgb(123,23,45)。如果optiones的 hex为true则可以是十二进制
 * @param {String} chack_color -替换成的颜色，rbj或hex
 * @param {{ error_range: number;hex:Blob }} [optiones={error_range:80,hex:false}]  -error_range颜色误差范围,hex是否是十六进制
 * @param {Element} result_dom_box -放处理过后的图片的盒子，用于展示处理好的图片
 */
function extractive_color_scale (img_dom,color_arr=['rgb(0,0,0)'],chack_color='rgb(255,255,255)',optiones={error_range:50,hex:false},result_dom_box=document.querySelector('body')){
    const canvas=document.createElement('canvas')
    canvas.height= img_dom.clientHeight
    canvas.width=img_dom.clientWidth
    const text_cont=canvas.getContext('2d')
    text_cont.drawImage(img_dom,0,0,canvas.width,canvas.height)
    const img_data = text_cont.getImageData(0 ,0 ,canvas.width,canvas.height)
    for(let zero=0,l=img_data.data.length/4;zero<l;zero+=1){
        color_arr.forEach((item,index)=>{
            //直接判断这个像素是哪一个颜色的，如果被多个元素(n个)拥有直接每个加 1/n
            let rgb_item_list=optiones.hex?hexToRgba(item):item.slice(4,-1).split(',').map((e)=>{return parseInt(e)})
            let chek_color_list=optiones.hex?hexToRgba(chack_color):chack_color.slice(4,-1).split(',').map((e)=>{return parseInt(e)})
            let r= img_data.data[zero*4+0]//r
            let g= img_data.data[zero*4+1]//g
            let b= img_data.data[zero*4+2]//b
            let d= ColorSimilarity([r,g,b],rgb_item_list)
            if(d<=optiones.error_range){
                img_data.data[zero*4+0]=chek_color_list[0]
                img_data.data[zero*4+1]=chek_color_list[1]
                img_data.data[zero*4+2]=chek_color_list[2]
            }
        })
    }
    text_cont.putImageData(img_data,0,0)
    canvas.id='hand_can'
   result_dom_box.appendChild(canvas)

    function ColorSimilarity(color_1=[0,0,0],color_2=[0,0,0]){
        return Math.sqrt(Math.pow((color_1[0]-color_2[0]),2) +Math.pow((color_1[1]-color_2[1]),2)+Math.pow((color_1[2]-color_2[2]),2))
    }//计算两颜色距离
    function hexToRgba(hex){
        const rgba = [];
        hex = hex.replace('#', '').padEnd(8, 'F');
        for (let i = 0; i < hex.length; i+=2) {
            rgba.push(parseInt(hex.slice(i, i+2), 16))
        }
        rgba.pop()
        return rgba;
    }//16进制转rbg
}

4、使用示例（index.html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./屏幕截图 2024-05-09 214213.png" alt="">
    <button onclick="star()" >要被替换的颜色</button>
    <div style="height: 20px;width: 20px;background-color: antiquewhite;" id="show_"></div>
    替换成
    <input type="color" name="" id="color_chen" >
    <button onclick="ok()">确认</button>
    <a href="" download="img_my_hand.jpg" id="download_a">下载处理好的图片</a>
    <canvas></canvas>
</body>
<script src='./main.js'></script>
<script>
    let color_chek;
    async function star(){
        let q = new EyeDropper()//系统取色
        let i = await q.open()//打开取色器
        color_chek=i.sRGBHex
        document.querySelector('#show_').style.backgroundColor=i.sRGBHex
    }
    function ok(){
        extractive_color_scale (document.querySelector('img'),color_arr=[color_chek],chack_color=document.querySelector('#color_chen').value,optiones={error_range:47,hex:true})
        domlode_img()
    }
    function domlode_img(){
        let haned_can = document.querySelector('#hand_can')
        let download_= document.querySelector('#download_a')
        download_.href= haned_can.toDataURL('image/jpeg')//下载canvas图片的方法
    }
</script>
</html>