文
章
目
录
章
目
录
本文主要讲解关于js如何实现图片取色，获取指定位置色值相关内容，让我们来一起学习下吧！
在开发中遇到一个需求，需要用鼠标在给定图片上吸取颜色值。
第一时间想到了canvas的context.getImageData()方法。
定义
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
- R - 红色 (0-255)
- G - 绿色 (0-255)
- B - 蓝色 (0-255)
- A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
color/alpha 以数组形式存在，并存储于 ImageData的data属性中。
语法
var imgData=context.getImageData(x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标。 |
| y | 开始复制的左上角位置的 y 坐标。 |
| width | 将要复制的矩形区域的宽度。 |
| height | 将要复制的矩形区域的高度。 |
目标就是获取鼠标点击位置(x,y)的第一组RGBA值 也就是ImageData前四个值(A是透明值可以不要)
获取图片指定位置的色值可以分为以下几步
图片：image， width：图片的展示宽度， height：图片的展示高度
1.把图片展示在页面上，给好宽高，加上鼠标移动事件，用来获取鼠标在图片上的位置(x,y)，怎么获取鼠标位置就不赘述了。
2.把要用到的图片以在页面的展示大小绘制在同样大小的canvas上
let offscreen = new OffscreenCanvas(width, height);
let context = offscreen.getContext("2d");
context.drawImage(image, 0, 0, width, height)
3.在鼠标移动时调用getImageData(x,y,width,height)从鼠标位置截取canvas的ImageData并拼出色值
let [r,g,b] = context.getImageData(x,y, width, height);
let color = `rgb(${r},${g},${b})`
至此功能实现。
以上就是关于js如何实现图片取色，获取指定位置色值相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！
