点击图片获取当前色值

ゝ一世哀愁。 2021-09-01 12:44 477阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>canvas 获取图像颜色</title>
        <style>
            body { 
                transition: background ease 0.2s;
                text-align: center;
                padding: 0;
                margin: 0;
            }
            #cursor { 
                width: 9px;
                height: 9px;
                position: absolute;
            }
            #cursor::before,
            #cursor::after { 
                content: '';
                position: absolute;
                background-color: #000;
            }
            #cursor::before { 
                left: 4px;
                top: 0;
                width: 1px;
                height: 9px;
            }
            #cursor::after { 
                top: 4px;
                left: 0;
                width: 9px;
                height: 1px;
            }
        </style>
    </head>
    <body>
        <h2>点击图片任意位置</h2>
    
        <h3 id="output"></h3>
        <script>
            window.addEventListener('load', function () { 
    // 将 img 绘制在 canvas 中
    function draw (img) { 
        var style = window.getComputedStyle(img);
        var width = parseInt(style.width, 10);
        var height = parseInt(style.height, 10);
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
    // 获取坐标颜色
    function getPixelColor (x, y) { 
        var imageData = ctx.getImageData(x, y, 1, 1);
        console.log(imageData, 222222222)
        var pixel = imageData.data;
        var r = pixel[0];
        var g = pixel[1];
        var b = pixel[2];
        var a = pixel[3] / 255;
        a = Math.round(a * 100) / 100;
        var rHex = r.toString(16);
        r < 16 && (rHex = "0" + rHex);
        var gHex = g.toString(16);
        g < 16 && (gHex = "0" + gHex);
        var bHex = b.toString(16);
        b < 16 && (bHex = "0" + bHex);
        var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
        var hexColor = "#" + rHex + gHex + bHex;
        return { 
            rgba: rgbaColor,
            rgb: rgbColor,
            hex: hexColor,
            r: r,
            g: g,
            b: b,
            a: a
        };
    }
    return { 
        getColor: getPixelColor,
    };
    };
    // 点击位置绘制一个十字坐标
    function setCursor (x, y) { 
    // <div id="cursor" class="cursor"></div>
    var cursor = document.getElementById('cursor');
    if (!cursor) { 
        cursor = document.createElement('div');
        cursor.id = 'cursor';
        document.body.appendChild(cursor);
    }
    cursor.style.left = x - 4 + 'px';
    cursor.style.top = y - 4 + 'px';
    }
    // var img = document.getElementById('img');
    var output = document.getElementById('output');
    var img = new Image();
    img.crossOrigin = '';
    img.onload = function () { 
        document.body.appendChild(img)
        var canvas = draw(img);
        img.addEventListener('click', function (e) { 
            var x = e.offsetX;
            var y = e.offsetY;
            setCursor(e.pageX, e.pageY);
            var color = (canvas.getColor(x, y)).rgba;
            document.body.style.background = color;
            output.innerHTML = '坐标点颜色：' + color;
        });
    };
    
    img.src = 'https://upload.jianshu.io/users/upload_avatars/1971769/aae6b929-375b-4604-a464-01cee188d63a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'
    });
    </script>
    </body>
    </html>