組件的HTML5屏幕截圖

Question

我想知道，是否有辦法獲取JavaScript中任何DOM元素的屏幕截圖並將屏幕截圖圖像保存到文件中。 （例如，出於測試目的……；是的，我知道我可以使用Selendroid，QF-Test，Sikuli，Sandstorm和其他很多工具，但我想知道如何使用純JavaScript來做到這一點）

我知道，我可以從canvas元素中截取屏幕截圖： <canvas />並打印屏幕/屏幕截圖 ，甚至可以截取該站點的完整截屏： 截取整個網頁的截屏 （基於此，應該可以僅單個/多個組件的屏幕截圖）

但是，有誰知道如何使用HTML5中的文件api（保存到用戶可以選擇的位置）來保存此類元素？

Answer 1

Javascript無法在瀏覽器渲染引擎中訪問像素級的內容。

我認為您唯一的選擇就是HTML 2 Canvas之類的工具，該工具可以用純JavaScript實現整個瀏覽器渲染引擎。 然后，您可以將圖像保存在canvas元素中。

HTML 2畫布

該腳本使您可以直接在用戶瀏覽器上拍攝網頁或其中一部分的“屏幕截圖”。 屏幕截圖基於DOM，因此可能無法真實表示100％的准確度，因為它無法生成實際的屏幕截圖，而是根據頁面上的可用信息構建屏幕截圖。

（請注意該部分說的可能不是100％准確，渲染網頁非常復雜）

實際上，您鏈接到的答案僅在此處具有相關性，因為它鏈接到為此目的而提及HTML 2 Canvas的文章，並采集了屏幕截圖以進行屏幕共享。