將HTML Canvas保存爲不帶客戶端瀏覽器的圖像

Question

當頁面加載時（無需用戶交互），我會在幾個重疊的畫布上生成圖像，但這需要大約3秒才能完全繪製。我想壓扁這些畫布，並將此圖像轉換爲服務器上的PNG，以用於縮略圖預覽。

展平爲一個畫布（使用ctx.drawImage（other_canvas，0,0）），然後ctx.toDataUrl（）看起來正是我所需要的。有沒有辦法做到這一點在服務器端而不需要用戶的瀏覽器？也許某種命令行的javascript/canvas解析器，它可以加載頁面，等待畫布完成渲染，然後注入一些javascript以平鋪，調用toDataUrl，調整大小並保存生成的圖像。

將縮略圖呈現併發送回服務器的AJAX解決方案將無法正常工作，因爲在第一個人查看該頁面之前，我需要縮略圖。它也需要很快（希望只比畫布渲染時間稍長一些，3秒）。我不能等待諸如瀏覽器之類的外部服務。

我看着CutyCapt，但它呈現整個網頁，而不僅僅是畫布（並且由於某種原因，似乎也沒有在畫布上繪製所有內容）。

謝謝。

Answer 1

你可能想看看Phantomjs： https://github.com/ariya/phantomjs/wiki/Screen-Capture

這確實呈現HTML內容到PNG一個良好的工作，雖然這也會做整個頁面。也許你可以將你感興趣的畫布內容包裝在一個單獨的頁面中，然後使用phantomjs將它變成一個PNG。

Answer 2

PHP爲various libraries提供服務器端圖像生成，它提供了類似於HTML5畫布的功能。

Answer 3

查看PhantomJS，它是webkit瀏覽器的命令行版本，您可以做一些很酷的事情，比如在圖像中保存渲染頁面的輸出等。AFAIK您還可以注入JavaScript代碼，這可以讓您更好地控制何時截取它。

http://phantomjs.org/