如何获取HTML页面中特定部分的背景颜色

Question

我使用渐变来设置我的html页面的背景颜色。

CSS：

background: linear-gradient(to top,  #fb4080 10%,#ebb523 22%,#58d27c 40%,#2aff00 52%,#0fd2b7 65%,#6b6dff 80%,#ff05ea 100%);

现在页面中有多种颜色。使用 JavaScript，如何获取页面特定部分的 RGB 或十六进制颜色代码值？

例如，如果我滚动页面，我想要获取页面顶部部分的颜色（突出显示部分内的颜色，但不是完全相同的颜色），以便我可以将该颜色代码分配/设置到我的页面上的另一个元素，例如导航栏、菜单等。

任何建议？

- Ramaraju.d

---

这可能会对您有所帮助：https://dev59.com/KnI-5IYBdhLWcg3wYXP8 - Zword

使用 tinycolor2 将 hsl 转换为 rgba - 这是大多数非画布颜色选择器所做的。 - Daniel Lizik

Answer 1

画布和图像对象是您可以读取像素值的唯一对象。

您可以在页面主体后面创建一个画布，并将渐变渲染到画布中，而不是使用CSS渐变。之后，您可以从画布中选择颜色。完整的示例在我对问题“如何将元素的背景设置为网页特定部分相同”的答案中。

- ceving

Answer 2

我可以想到以下选项：

1. 在Javascript中计算梯度，您应该能够获取像素值 如何找出渐变中的所有颜色？

2. 创建一个隐藏的画布，并使用相同的渐变从该画布中选择像素 http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/

3. 使用Javascript的屏幕截图库，并从屏幕截图数据中选择像素。 使用HTML5 / Canvas / JavaScript进行屏幕截图

- Bas van Dijk

---

据我所知，我发现第三个并没有太大的帮助，但是第一和第二个讲解了如何创建渐变，而我已经完成了这个过程。 - Ramaraju.d

让我更简单地解释一下，我想要获取页面上任意点的像素颜色，我表达清楚了吗？无论如何，你的回答让我思考了很广泛的领域，我非常感谢你OSI。 - Ramaraju.d

那么选项3是唯一合适的。 - Bas van Dijk