從 DOM 元素生成圖像

Question

是否可以從 dom 元素（span、div、圖像等）生成圖像？ 在這種情況下，我不能使用 canvas，它不必跨瀏覽器兼容，只要它在某些瀏覽器中工作即可。 :-)

謝謝！

社區編輯： “所以我認為客戶端已經可以很好地顯示這些元素，但是您希望服務器能夠，例如在站點周圍顯示預覽圖像？” “是的，沒錯。只是一個小預覽，這樣他們就可以看到他們正在打開的圖表，並且預覽也將在其他小地方使用。”

Answer 1

如果您想將其復制到其他位置，您可以使用-moz-element ，這是 Firefox 中的一個實驗性非標准功能，它可以讓您獲取 DOM 的任何部分，並將其用作例如背景圖像。 https://developer.mozilla.org/en/CSS/-moz-element

通過濫用-webkit-box-reflect可以在 webkit 中完成類似的黑客攻擊。

Answer 2

所以我認為客戶端已經可以很好地顯示這些元素，但是您希望服務器能夠，例如預覽？

是的，正是。 只是一個小預覽，這樣他們就可以看到他們正在打開的圖表，並且預覽也將在其他小地方使用。 – 歐普

客戶端：

• 你在要求一些非常……有趣的東西。 =) 這是可能的，因為有基於 Web 的錯誤跟蹤解決方案允許您截取屏幕截圖。 例如，我通過谷歌搜索website bug report screenshot發現的這個隨機的似乎使用瀏覽器擴展來執行魔術。

• 您還可以使用 Flash 來執行此魔術。

• 或者，如果它不會產生重大開銷，您可以使用<div style="overflow:hidden; position:relative;"> (insert all your dom elements here) </div> ，但是如果單個圖像具有非常非常非常多的元素，這將顯着減慢您實現的任何類型的“預覽頁面”的呈現速度，除非您將 html 插入到頁面中- 一次超過幾秒鍾； 該頁面可能仍然有點滯后。

服務器端：

• 然而，最便攜的方法是使用服務器端 Web 渲染引擎（最好是沙盒），該引擎旨在以編程方式訪問，即讓您截取頁面的屏幕截圖。

Answer 3

使用像 MWSnap 這樣的單獨屏幕捕獲程序怎么樣？