点击图片获取当前色值

最新推荐文章于 2024-03-03 22:32:56 发布

-多巴胺-

最新推荐文章于 2024-03-03 22:32:56 发布

阅读量231

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43012505/article/details/107544519

版权

javascript 专栏收录该内容

12 篇文章 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>

-多巴胺-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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 { tran
复制链接

扫一扫

专栏目录