如何获取html页面上特定部分的背景颜色答案

【问题标题】：How to GET background color of a particular portion on the html page如何获取html页面上特定部分的背景颜色
【发布时间】：2014-01-04 00:32:48
【问题描述】：

我使用 Gradient 为我的 html 正文背景设置颜色。

CSS：

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

现在身体充满了多种颜色。使用 javascript 如何获取页面特定部分的 rgb 或 hex 颜色代码值？

示例：

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

有什么建议吗？

【问题讨论】：

【解决方案1】：

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

您可以在页面主体后面创建一个画布并将渐变渲染到画布中，而不是使用 CSS 渐变。之后，您可以从画布中选择一种颜色。一个完整的例子在我的answer 到问题“How to set an element's background as the same as a specific portion of web page”。

【讨论】：

【解决方案2】：

我可以在这里想到以下选项：

用 Javascript 计算你应该能够的梯度获取像素值 How to figure out all colors in a gradient?
创建一个具有相同渐变的隐藏画布并选择像素从这张画布上 http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/
使用 Javascript 的屏幕截图库并从中选择像素截图数据。 Using HTML5/Canvas/JavaScript to take screenshots

【讨论】：