如何獲取html頁面上特定部分的背景顏色

Question

我使用 Gradient 為我的 html 正文背景設置顏色。

CSS：

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

現在身體充滿了多種顏色。 使用 javascript 如何獲取頁面特定部分的 rgb 或十六進制顏色代碼值？

示例：

如果我滾動頁面，我想獲取頁面頂部的顏色（突出顯示部分內的顏色不完全是它附近的值）以便我可以將該顏色代碼分配/設置到我頁面上的另一個元素如導航欄、菜單等

有什么建議么？

Answer 1

我可以在這里想到以下選項：

1. 計算您應該能夠獲得像素值的Javascript中的漸變如何找出漸變中的所有顏色？

2. 創建一個具有相同漸變的隱藏畫布，並從該畫布中選取像素http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/

3. 使用 Javascript 屏幕截圖庫並從屏幕截圖數據中選擇像素。 使用 HTML5/Canvas/JavaScript 截取屏幕截圖

Answer 2

畫布和圖像對象是唯一可以從中讀取像素值的對象。

您可以在頁面主體后面創建一個畫布，並將漸變渲染到畫布中，而不是使用 CSS 漸變。 之后，您可以從畫布中選擇一種顏色。 一個完整的例子是我對“如何將元素的背景設置為與網頁的特定部分相同”的回答。