js 利用 canvas 的 getImageData 做一个点击图片任意位置获取颜色

最新推荐文章于 2025-02-10 10:38:02 发布

星之海丶

最新推荐文章于 2025-02-10 10:38:02 发布

阅读量3.1k

点赞数 4

分类专栏：笔记文章标签： javascript html html5 css css3

本文链接：https://blog.csdn.net/weixin_46094786/article/details/115966981

版权

笔记专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML5 Canvas的getImageData方法，用于获取指定区域的像素数据，从而实现图片吸色功能。通过监听canvas的点击事件，结合getImageData方法可以获取到用户点击位置的RGB值，并将该颜色应用于页面上的小正方形，实现简单的颜色选取。同时，文章提到了处理本地图片可能出现的跨域问题，以及RGB值转换为HEX色值的辅助函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。

解释

CanvasRenderingContext2D.getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。

语法

ctx.getImageData(sx, sy, sw, sh);

参数

sx：将要被提取的图像数据矩形区域的左上角 x 坐标。

sy：将要被提取的图像数据矩形区域的左上角 y 坐标。

sw：将要被提取的图像数据矩形区域的宽度。

sh：将要被提取的图像数据矩形区域的高度。

返回值

一个 ImageData 对象，包含 canvas 给定的矩形图像数据。

ImageData 对象会有三个属性，height、width 和 data。

ImageData.height
使用像素描述 ImageData 的实际高度，这个值其实等于 getImageData() 方法中的参数 sh

ImageData.width
使用像素描述 ImageData 的实际宽度。这个值其实等于 getImageData() 方法中的参数 sw

ImageData.data
一个一维数组，包含以 RGBA 顺序的数据，数据使用 0 至 255（包含）的整数表示。

制作图片吸色

原理就是把图片放到 canvas 里，然后获取点击坐标、通过getImageData 取色

注意

如果高度（sh）或者宽度（sw）变量为0，则会抛出错误。

本地会把图片放到 canvas 里会报跨域，可以放到服务器上或自己起个服务，若哪位大佬有更好的方法望告知，非常感谢~

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>getcolor</title>
    <style>
      .container{display:flex;height:40px;width:300px;}
      #color{height:40px;width:40px;}
      #text{padding-left:10px;line-height:40px;}
    </style>
</head>
<body style="margin: 0;">
    <canvas id="canvas"></canvas>
    <div class="container"> 
    <div id="color"></div>
    <div id="text"></div>
    </div> 
</body>
<script>
  var img = new Image();
  img.src ='./图片.jpeg'
  var canvas = document.getElementById('canvas');
  var color = document.getElementById('color');
  var text = document.getElementById('text');

  canvas.width=200;
  canvas.height=200;
  var ctx = canvas.getContext('2d');
  img.onload = function() {
    // 在canvas上画图片
    ctx.drawImage(img, 0, 0,200,200);
  };
  function pick(event) {
    // 获取鼠标坐标
    var x = event.layerX;
    var y = event.layerY;
    // 获取图片像素信息
    var pixel = ctx.getImageData(x, y, 1, 1);
    var data = pixel.data;
    // 获取rgba值
    var rgba = 'rgba(' + data[0] + ',' + data[1] +',' + data[2] + ',' + (data[3] / 255) + ')';
    // 设置小正方形的背景颜色
    color.style.background =rgba;

    // 把拼接的字符串设置为元素的文本内容
    text.textContent = rgba;
  }
  canvas.addEventListener('click', pick);
</script>
</html>

## 结果

在这里插入图片描述

RGB 转 HEX

// rgb转HEX
    function rgb2hex(rgb) {
        var reg=/(\d{1,3}),(\d{1,3}),(\d{1,3})/;
        var arr=reg.exec(rgb);

        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        var _hex="#" + hex(arr[1]) + hex(arr[2]) + hex(arr[3]);
        return _hex.toUpperCase();
    }