將呈現的HTML保存爲圖像

Question

我正在構建一個需要將div導出到圖像的web應用程序。該div將包含圖像，其他div，用css樣式的文本等等。最後，用戶應該有一張圖像，看起來就像他截取了該div的截圖一樣。我查看了服務器端的php庫，但是我沒有看到任何能夠處理呈現的HTML複雜性的東西。 HTML5畫布具有該功能，但我無法爲我的情況使用畫布。有任何想法嗎？

謝謝！

Answer 1

您可以將div標記爲canvas標記，直接訪問像素數據，將其發送到PHP腳本並使用數據構建圖像。

這裏是你如何獲得的像素數據 https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

這裏就是你會用什麼用像素 http://php.net/manual/en/function.imagesetpixel.php

Answer 2

我已經寫了與CSS樣式的畫布轉換HTML的一個項目創建了圖像的像素。

它可以在這裏找到：https://github.com/coolbloke1324/html-to-canvas

和實例測試頁，請訪問：http://www.isogenicengine.com/html-canvas/test/index.html

在測試頁，初始加載只會顯示一個正方形的DIV，裏面坐了一些其他的div各種像背景和包括邊框半徑在內的邊框等風格。您會在頁面右上方看到一個標記爲「渲染」的按鈕。點擊該按鈕，畫布將被創建，然後DOM將被解析並呈現到畫布上。我故意將畫布的背景顏色更改爲黑色，以便您可以看到差異。

Answer 3

退房html2canvas。在canvas元素上呈現頁面內容的JavaScript框架。