如何捕捉HTML元素的圖像並保持透明度？

Question

我是在一個頁面上工作，可以讓網站管理員添加樣式到他們的twitter feed。其中幾種樣式在顯示屏上使用透明度。我想創建一個供他們選擇的圖像列表。目前，我所檢查的背景截屏像這樣：

但是，這不是我真正想要的東西。

是他們捕獲HTML元素的圖像，並保持透明度的一些方法？

編輯：我只是挖成這樣，所以我整個新的話題，如HTML5 Canvas和-moz-元素到來。是否可以使用-moz-element將canvas背景設置爲html元素，然後從畫布中提取圖像數據？我會試試這個，除非有人在那裏做過這件事。

編輯：-moz元素和畫布是一個deadend。 -moz-element會將該項目設置爲背景，但不允許您保存背景圖像。即使背景是普通圖像，畫布也不會保存其背景。

Answer 1

它需要工作的一點點，但它是可行的，只要它是HTML你」重新佈局。您無法恢復已下載頁面中標記的透明度，而無需保存這些頁面並在本地進行編輯。通過在不同的背景顏色上多次渲染HTML元素，可以使用圖像編輯器導出不透明度。你將需要一個體面的圖像編輯器，我使用GIMP。

1. 在黑色，白色和中性灰色背景（＃888）上渲染要保存三次的元素。

2. 使用屏幕捕捉程序，捕捉那些顯示器，並將其裁剪完全相同的區域。

3. 在GIMP打開這些圖像作爲層和命令他們的黑色，白色和灰色，從上到下。

4. 設置頂部黑色圖層爲差異模式。這將給黑色和白色層之間的灰度差異。

5. 向下合併頂層。這將使我們有兩層。灰色背景層和灰度差異。反轉差異圖層的顏色，並將其複製到剪貼板。

6. 將圖層蒙版添加到灰色背景圖層並將剪貼板粘貼到圖層蒙版。

7. 刪除灰度圖層並在灰色背景圖層上應用圖層蒙版。這應該留下一層與原始相似的不透明度。

8. 不透明度有點偏差，但如果我們複製圖層並將其與自身合併，它就是在大球場上。

這可能不是像素完美，但它是概念驗證。可以捕獲HTML標記的不透明度。

Answer 2

不，沒有任何軟件可以讓你截取屏幕截圖並保留單個視覺元素的透明度作爲圖像中的透明點，因爲這不是截圖的工作方式 - 屏幕截圖是所見即所得，根據定義，所有元素你的屏幕截圖將始終有一個不透明的背景。

我認爲這裏最好的選擇是將所需的部分重新創建爲圖像，在這裏您可以正常控制透明度。這不是最好的解決方案，但是如果你對相同類型的東西做了很多這樣的事情，那麼對於你來說快速而不是裁剪/編輯屏幕截圖。

Answer 3

你需要的是一個Web瀏覽器，它可以渲染成內存中的圖像緩衝區而不是屏幕。

我的猜測是，所有的瀏覽器都可以從JavaScript做到這一點（渲染器的應該是一部分），但我不知道在那裏你可以訪問此功能的瀏覽器，至少不會。

如果下載的是WebKit的來源，應該有測試案例裏面做這樣的事情： -/