Javascript-從畫布元素下的圖像獲取像素數據？

Question

您可以使用getImageData（）在畫布圖像上采樣像素顏色數據。 如果我在背景圖像或Flash電影上疊加了透明的畫布元素，是否可以通過canvas標簽從其中采樣顏色？

Answer 1

菲爾是對的，你做不到。 根據設計，畫布僅返回其自身的固有像素數據，而不返回任何其他元素在屏幕上呈現的內容。

您可以制作一個canvas元素來覆蓋整個頁面並捕獲渲染屏幕的圖像。

如果可能的話，那將是一個跨站點腳本的安全漏洞。 您可以對目標站點進行構架（利用用戶的cookie /身份驗證/內聯網訪問它），然后逐個像素地從目標站點中吸取內容。

Answer 2

我覺得不是。 屆時您將獲得畫布的顏色。 我確實找到了方法document.defaultview.getComputedStyle(element,pseudoElt) ，但是在沒有背景色的1像素div上，它返回了“透明”。

因此，不幸的是，目前這可能是不可能的。 您的更高目標是什么？ 我們也許可以提出一條替代路線。

“我之前有一個將圖像數據復制到javascript對象中的想法。您可以制作一個canvas元素來覆蓋整個頁面並捕獲呈現的屏幕圖像。一旦有了這些數據，就可以進行真實世界的跨瀏覽器測試， 也許。”

如果您不介意這是靜態圖片，那么可以使用一個很棒的網站： Browser Shots 。 它生成在各種不同瀏覽器中運行的網站的屏幕截圖。