通过js控制人像图片的底色，比如将一张一寸的人像图片底色从红色修改蓝色？？？

比如我从本地上传一张一寸红色背景颜色的图片，然后通过代码修改成蓝色的背景颜色？？？小弟js有点不太懂，望大佬解惑。

解决方案 »

  1.   

    这个是ps做的，web值负责显示，不提供修改
      

  2.   

    需要修改的话js是做不到，我可以做到（精通ps）
      

  3.   

    画布导出imageData 然后修改对象素的RGB 再导回画布
      

  4.   

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相片蓝色转红色</title>
    </head>
    <body>
    <img src="pic.png" alt="" />
    <canvas></canvas>
    <script>
        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            const max = Math.max(r, g, b), min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;
            if (max === min){
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return [h, s, l];
        }
        function hslToRgb(h, s, l) {
            let r, g, b;
            if(s === 0) {
                r = g = b = l;
            } else {
                const hue2rgb = function hue2rgb(p, q, t) {
                    if(t < 0) t += 1;
                    if(t > 1) t -= 1;
                    if(t < 1/6) return p + (q - p) * 6 * t;
                    if(t < 1/2) return q;
                    if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                    return p;
                }
                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                const p = 2 * l - q;
                r = hue2rgb(p, q, h + 1/3);
                g = hue2rgb(p, q, h);
                b = hue2rgb(p, q, h - 1/3);
            }
            return [Math.round(r * 255),Math.round(g * 255),Math.round(b * 255)];
        }
        const img = document.createElement('img')
        const canvas = document.querySelector('canvas')
        const ctx = canvas.getContext('2d')
        img.onload = function(){
            let w = this.width
            let h = this.height
            canvas.width = w
            canvas.height = h
            ctx.drawImage(img, 0, 0, w, h);
            const imageData = ctx.getImageData(0, 0, w, h)
            const data = imageData.data
            for (let i = 0, l = data.length; i < l; i += 4) {
                let hsl = rgbToHsl(data[i], data[i + 1], data[i + 2])
                if (hsl[0] > 0.34 && hsl[0] < 0.75) {
                    hsl[0] += 0.34 //蓝色转红色
                    hsl[1] += 0.2 //调整亮度
                    let rgb = hslToRgb.apply(this, hsl)
                    data[i] = rgb[0]
                    data[i + 1] = rgb[1]
                    data[i + 2] = rgb[2]
                }
            }
            ctx.putImageData(imageData, 0, 0, 0, 0, w, h)
        }
        img.src = 'pic.png'
    </script>
    </body>
    </html>