已解決430363個問題，去搜搜看，總會有你想問的

如何使用JavaScript拍攝div的屏幕截圖？

首頁猿問如何使用JavaScript拍攝d...

如何使用JavaScript拍攝div的屏幕截圖？

JavaScript JQuery Html/CSS

慕碼人2483693 2019-07-05 12:41:18

如何使用JavaScript拍攝div的屏幕截圖？我正在構建一個叫做“HTML測試”的東西。它完全運行在JavaScript上，非常酷。最后，會彈出一個結果框，上面寫著“您的結果”：它顯示了他們花了多少時間，得到了多少百分比，以及他們從10個中得到了多少個問題。我希望有一個按鈕，上面寫著“捕捉結果”，并讓它以某種方式拍攝一個屏幕截圖或div的什么東西，然后顯示在頁面上捕捉到的圖像，他們可以右擊和“另存圖像為”。我真的很樂意這樣做，這樣他們就可以和別人分享他們的成果了。我不希望他們“復制”結果，因為他們可以很容易地改變。如果他們改變了圖像中的內容，哦，好吧。有人知道怎么做這件事或類似的事嗎？

查看完整描述

3 回答

藍山帝景

TA貢獻1843條經驗獲得超7個贊

不，我不知道如何“屏幕截圖”一個元素，但你可以做的是將測試結果繪制到一個畫布元素中，然后使用HTMLCanvasElement對象的toDataURL函數以獲得data:帶圖像內容的URI。

完成測試后，執行以下操作：

var c = document.getElementById('the_canvas_element_id');var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

當用戶單擊“Capture”時，執行以下操作：

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

這將打開一個新的選項卡或窗口與“屏幕截圖”，允許用戶保存它。沒有辦法調用“另存為”對話框的類型，所以在我看來，這是最好的方法。

反對回復 2019-07-05

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

這是“達森”的擴展回答，使用HTML 2畫布和FileSaver.js.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });});

此代碼塊等待帶有id的按鈕。btnSave被點擊。如果是，則轉換widgetdiv到一個畫布元素，然后使用SaveAs()FileSaver接口(通過不支持它的瀏覽器中的FileSaver.js)將div保存為名為“Dashboard.png”的圖像。

本文提供了此工作的一個示例。小提琴.

反對回復 2019-07-05

3 回答
0 關注
1290 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如何使用JavaScript拍攝div的屏幕截圖？

如何使用JavaScript拍攝div的屏幕截圖？

3 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用JavaScript拍攝div的屏幕截圖？

如何使用JavaScript拍攝div的屏幕截圖？

3 回答

相關問題推薦

添加回答