# 使用小程序的 Canvas 2D 提取特定点的颜色
- Link: https://www.ixiqin.com/2022/07/30/canvas-2-d-extraction-using-a-small-application-specific-colors/
- Published: 2022-07-30T06:00:00+08:00
- Author: 白宦成
文章目录
[Toggle](https://www.ixiqin.com/2022/07/30/canvas-2-d-extraction-using-a-small-application-specific-colors/#)
* [页面布局](https://www.ixiqin.com/2022/07/30/canvas-2-d-extraction-using-a-small-application-specific-colors/#%e9%a1%b5%e9%9d%a2%e5%b8%83%e5%b1%80)
* [对应的 JS](https://www.ixiqin.com/2022/07/30/canvas-2-d-extraction-using-a-small-application-specific-colors/#%e5%af%b9%e5%ba%94%e7%9a%84_js)
在小程序当中，我们可以通过在 Canvas 画布上绑定 Tap 事件，来获取到用户点击行为，当
我们获取到点击行为对应的坐标时，就可以读取到对应位置的颜色。并根据我们的需求，将
颜色转换成我们想要的 RBG 色值。
这就是我们常见的各种取色软件的最常见的实现方式。当然，落实到实际开发过程中，大家
或多或少会有所不同（涉及到调色。我们拍照的颜色和我们所看到的颜色并不完全一样。不同
的相机调色会有所不同。类似的，我们需要加入相应的逆向算法排除对应的相机自身调教的
影响）。
在小程序的场景中具体实现方式可参考如下代码：
## 页面布局
```shcb-line-numbers
Code language: HTML, XML (xml)
```
## 对应的 JS
和在 [在小程序中使用的 Canvas 2D API 绘制本地图片](https://www.ixiqin.com/2022/07/29/in-a-small-program-used-in-the-canvas-api-to-draw-2-d-local-pictures/)
一样，你需要提取到 Canvas 的 Ctx ，用于执行操作。当你通过 bindTap 拿到你的点击点
相对于 Canvas 的 左上角的坐标后，就可以使用 `getImageData`
来提取具体范围的数据。因为我的目的是提取某个点的颜色，因此我的第三、第四参数都是
1 （取一个像素点的宽度和高度）。
提取出图片数据后，你可以在 data 当中提取一个 4 个元素的数组，按照顺序，分别是 RGBA
的四个值，你可以根据需要使用这个数据（比如放大展示在界面上）。
```javascript
Page({
data: {
color: ''
},
onCanvasTap(e) {
const query = wx.createSelectorQuery()
query.select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const data = ctx.getImageData(e.detail.x, e.detail.y, 1, 1).data;
const [red,gree,blue,alpha] = data;
})
},
});
Code language: JavaScript (javascript)
```