本發(fā)明涉及一種可視化大屏自動截圖方法、系統(tǒng)及程序，尤其涉及一種網(wǎng)絡(luò)靶場可視化大屏自動截圖方法、系統(tǒng)及程序。

背景技術(shù)：

1、網(wǎng)絡(luò)靶場(cyber?range)是一種將真實網(wǎng)絡(luò)空間中的網(wǎng)絡(luò)架構(gòu)、系統(tǒng)設(shè)備、業(yè)務(wù)流程的運行狀態(tài)及運行環(huán)境等進行模擬和復現(xiàn)的技術(shù)。

2、可視化大屏是一種數(shù)據(jù)可視化展示方式，它通過在大型屏幕上展示圖表、圖形和數(shù)據(jù)儀表盤，以及第三方平臺，如3d引擎程序,gis地圖等復雜的數(shù)據(jù)和信息，以直觀、生動的方式呈現(xiàn)給用戶?？梢暬笃習卸喾N風格樣式和不同的展示內(nèi)容，為了方便用戶快速選擇自己需要展示的大屏，就需要將大屏內(nèi)容以海報或截圖等形式將大屏內(nèi)容進行展示出來。

3、目前前端常見的是使用html2canvas第三方插件對頁面進行自動截圖處理，html2canvas是一個流行的javascript庫，可以在瀏覽器中將html元素轉(zhuǎn)換為圖像。它可以自動截取整個頁面，也可以截取頁面中的指定部分，但是如果頁面中包含了iframe嵌套的含有復雜元素的頁面，html2canvas會截取不到含有iframe元素的部分，最后的圖像效果包含iframe的部分就會顯示成空白。

技術(shù)實現(xiàn)思路

1、發(fā)明目的：針對上述現(xiàn)有技術(shù)存在的問題，本發(fā)明目的在于提供一種可以解決html2canvas截取不到含有iframe元素部分的問題的網(wǎng)絡(luò)靶場可視化大屏自動截圖方法、系統(tǒng)及程序。

2、技術(shù)方案：為實現(xiàn)上述發(fā)明目的，本發(fā)明采用如下技術(shù)方案：

3、本發(fā)明所述的網(wǎng)絡(luò)靶場可視化大屏自動截圖方法，包括以下步驟：

4、s1：基于html2canvas使用clonenode方法克隆dom元素；所述clonenode方法，具體從根元素向下進行深度遍歷，使用createelementclone方法創(chuàng)建node實例對象，然后使用window對象提供的getcomputedstyle方法獲取樣式數(shù)據(jù)，通過封裝的樣式計數(shù)方法對樣式數(shù)據(jù)進行處理，同時使用this.resolvepseudocontent掛載before和after偽元素，判斷是否存在子元素，如果存在則進行遞歸重新掛載操作，最后返回處理好的node實例數(shù)據(jù)；

5、s2：通過html2canvas渲染canvas,對iframe元素進行處理，生成圖片；所述對iframe元素進行處理，包括html2canvas首先按照元素的層疊關(guān)系自頂向下逐步繪制到canvas對象里，然后利用canvas的底層api，todataurl將iframe元素轉(zhuǎn)換成字節(jié)流數(shù)據(jù)，然后再通過后臺將字節(jié)流轉(zhuǎn)換生成截圖的在線地址，最終通過img標簽的src屬性展示圖片的地址。

6、進一步地，所述步驟s1具體方法流程如下：

7、s11：通過createelementclone方法創(chuàng)建node實例對象；

8、s12：使用getcomputedstyle方法獲取樣式，并對樣式數(shù)據(jù)進行處理；

9、s13：使用this.resolvepseudocontent掛載before和after偽元素；

10、s14：判斷是否存在子元素，如果存在，則返回s12重復操作；

11、s15：返回處理好的node實例數(shù)據(jù)。

12、進一步地，所述渲染canvas，具體為將克隆dom過程處理的數(shù)據(jù)渲染到canvas，通過生成層疊上下文樹，將元素的繪制節(jié)點放到多個階層，確定層疊順序，層疊順序的邏輯處理是通過renderstackcontent進行處理，然后調(diào)用底層cancas?api進行渲染。

13、進一步地，所述步驟s2具體方法流程如下：

14、s21：通過renderstackcontent實現(xiàn)css層疊布局規(guī)則；

15、s22：設(shè)置iframe元素的ref引用為canvasref；

16、s26：通過canvasref獲取iframe元素的寬高；

17、s27：使用html2canvas處理iframe元素；

18、s28：將base64格式數(shù)據(jù)轉(zhuǎn)換為圖片地址。

19、基于相同的發(fā)明構(gòu)思，本發(fā)明還提供了一種網(wǎng)絡(luò)靶場可視化大屏自動截圖系統(tǒng)，包括：

20、克隆模塊，用于基于html2canvas使用clonenode方法克隆dom元素，所述clonenode方法，具體從根元素向下進行深度遍歷，使用createelementclone方法創(chuàng)建node實例對象，然后使用window對象提供的getcomputedstyle方法獲取樣式數(shù)據(jù)，通過封裝的樣式計數(shù)方法對樣式數(shù)據(jù)進行處理，同時使用this.resolvepseudocontent掛載before和after偽元素，判斷是否存在子元素，如果存在則進行遞歸重新掛載操作，最后返回處理好的node實例數(shù)據(jù)；

21、渲染模塊，用于通過html2canvas渲染canvas,對iframe元素進行處理，生成圖片；所述對iframe元素進行處理，包括html2canvas首先按照元素的層疊關(guān)系自頂向下逐步繪制到canvas對象里，然后利用canvas的底層api，todataurl將iframe元素轉(zhuǎn)換成字節(jié)流數(shù)據(jù)，然后再通過后臺將字節(jié)流轉(zhuǎn)換生成截圖的在線地址，最終通過img標簽的src屬性展示圖片的地址。

22、進一步地，所述克隆模塊，用于基于html2canvas使用clonenode方法克隆dom元素，具體包括：

23、通過createelementclone方法創(chuàng)建node實例對象；

24、使用getcomputedstyle方法獲取樣式，并對樣式數(shù)據(jù)進行處理；

25、使用this.resolvepseudocontent掛載before和after偽元素；

26、判斷是否存在子元素，如果存在，則返回使用getcomputedstyle方法獲取樣式，并對樣式數(shù)據(jù)進行處理，重復操作；

27、返回處理好的node實例數(shù)據(jù)。

28、進一步地，所述渲染canvas，具體為將克隆dom過程處理的數(shù)據(jù)渲染到canvas，通過生成層疊上下文樹，將元素的繪制節(jié)點放到多個階層，確定層疊順序，層疊順序的邏輯處理是通過renderstackcontent進行處理，然后調(diào)用底層cancas?api進行渲染。

29、進一步地，所述渲染模塊通過html2canvas渲染canvas,對iframe元素進行處理，生成圖片，具體包括：

30、通過renderstackcontent實現(xiàn)css層疊布局規(guī)則；設(shè)置iframe元素的ref引用為canvasref；

31、通過canvasref獲取iframe元素的寬高；

32、使用html2canvas處理iframe元素；

33、將base64格式數(shù)據(jù)轉(zhuǎn)換為圖片地址。

34、基于相同的發(fā)明構(gòu)思，本發(fā)明還提供了一種計算機系統(tǒng)，包括存儲器、處理器及存儲在存儲器上并可在處理器上運行的計算機程序所述計算機程序被加載至處理器時實現(xiàn)上述任一項所述的網(wǎng)絡(luò)靶場可視化大屏自動截圖方法的步驟。

35、基于相同的發(fā)明構(gòu)思，本發(fā)明還提供了一種計算機程序產(chǎn)品，包括計算機程序/指令，該計算機程序/指令被處理器執(zhí)行時實現(xiàn)根據(jù)上述任一項所述的網(wǎng)絡(luò)靶場可視化大屏自動截圖方法的步驟。

36、有益效果：與現(xiàn)有技術(shù)相比，本發(fā)明通過基于html2canvas對iframe元素進行處理，html2canvas會按照元素的層疊關(guān)系自頂向下逐步繪制到canvas對象里，用過獲取iframe元素的ref引用，對圖片截取的失真影響進行處理，利用canvas的底層api，todataurl將iframe元素轉(zhuǎn)換成字節(jié)流數(shù)據(jù)，然后再通過后臺將base64格式轉(zhuǎn)換生成截圖地址，最終通過img標簽的src屬性展示圖片的地址，方便用戶直觀地看到可視化大屏的展示內(nèi)容，從而快速選擇自己需要的可視化大屏。