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

Question

我正在構建一個叫做“HTML Quiz”的東西。 它完全在 JavaScript 上運行，非常酷。

最后，會彈出一個結果框，上面寫着“你的結果：”，它顯示了他們花了多少時間，他們得到了多少百分比，以及他們從 10 個問題中得到了多少個問題。我想要一個按鈕，上面寫着“捕獲結果”並讓它以某種方式截取 div 的屏幕截圖或其他內容，然后只在頁面上顯示捕獲的圖像，他們可以在頁面上右鍵單擊並“將圖像另存為”。

我真的很想這樣做，這樣他們就可以與他人分享他們的成果。 我不希望他們“復制”結果，因為他們可以很容易地改變它。 如果他們改變圖片中的內容，哦，好吧。

有誰知道這樣做或類似的方法嗎？

Answer 1

不，我不知道有什么方法可以對元素進行“屏幕截圖”，但您可以做的是將測驗結果繪制到畫布元素中，然后使用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 */

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

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

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

Answer 2

這是@Dathan's answer的擴展，使用html2canvas和FileSaver.js 。

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


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

此代碼塊等待單擊 id 為btnSave按鈕。 當它是時，它將widget div 轉換為畫布元素，然后使用 saveAs() FileSaver 接口（通過本地不支持它的瀏覽器中的 FileSaver.js）將 div 保存為名為“Dashboard.png”的圖像.

這個工作的一個例子可以在這個小提琴上找到。

Answer 3

經過數小時的研究，我終於找到了一個解決方案來截取元素的截圖，即使設置了origin-clean FLAG（以防止 XSS），這就是為什么你甚至可以捕獲例如谷歌地圖（在我的情況下） . 我寫了一個通用函數來獲取屏幕截圖。 此外，您唯一需要的是 html2canvas 庫 ( https://html2canvas.hertzen.com/ )。

例子：

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) {
    // in the data variable there is the base64 image
    // exmaple for displaying the image in an <img>
    $("img#captured").attr("src", "data:image/png;base64,"+data);
});

請記住，如果圖像的大小很大，則console.log()和alert()不會生成輸出。

功能：

function getScreenshotOfElement(element, posX, posY, width, height, callback) {
    html2canvas(element, {
        onrendered: function (canvas) {
            var context = canvas.getContext('2d');
            var imageData = context.getImageData(posX, posY, width, height).data;
            var outputCanvas = document.createElement('canvas');
            var outputContext = outputCanvas.getContext('2d');
            outputCanvas.width = width;
            outputCanvas.height = height;

            var idata = outputContext.createImageData(width, height);
            idata.data.set(imageData);
            outputContext.putImageData(idata, 0, 0);
            callback(outputCanvas.toDataURL().replace("data:image/png;base64,", ""));
        },
        width: width,
        height: height,
        useCORS: true,
        taintTest: false,
        allowTaint: false
    });
}

Answer 4

如果您希望有“另存為”對話框，只需將圖像傳遞到 php 腳本中，它會添加適當的標題

示例“多合一”腳本script.php

<?php if(isset($_GET['image'])):
    $image = $_GET['image'];

    if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
        $base64 = $match[2];
        $imageBody = base64_decode($base64);
        $imageFormat = $match[1];

        header('Content-type: application/octet-stream');
        header("Pragma: public");
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private", false); // required for certain browsers
        header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
        header("Content-Transfer-Encoding: binary");
        header("Content-Length: ".strlen($imageBody));
        echo $imageBody;
    }
    exit();
endif;?>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<canvas id="canvas" width="300" height="150"></canvas>
<button id="btn">Save</button>
<script>
    $(document).ready(function(){
        var canvas = document.getElementById('canvas');
        var oCtx = canvas.getContext("2d");
        oCtx.beginPath();
        oCtx.moveTo(0,0);
        oCtx.lineTo(300,150);
        oCtx.stroke();

        $('#btn').on('click', function(){
            // opens dialog but location doesnt change due to SaveAs Dialog
            document.location.href = '/script.php?image=' + canvas.toDataURL();
        });
    });
</script>

Answer 5

var shot1=imagify($('#widget')[0], (base64) => {
  $('img.screenshot').attr('src', base64);
});

看看htmlshot package ，然后，深入檢查客戶端部分：

npm install htmlshot

Answer 6

在 index.html 中添加此腳本

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

使用此函數獲取 div 標簽的截圖

  getScreenShot(){
    let c = this.elem.nativeElement.querySelector('.chartContainer'); // or document.getElementById('canvas');
    html2canvas(c).then((canvas:any)=>{
      var t = canvas.toDataURL().replace("data:image/png;base64,", "");
      this.downloadBase64File('image/png',t,'image');
    })
  }

downloadBase64File(contentType:any, base64Data:any, fileName:any) {
  const linkSource = `data:${contentType};base64,${base64Data}`;
  const downloadLink = document.createElement("a");
  downloadLink.href = linkSource;
  downloadLink.download = fileName;
  downloadLink.click();
}

Answer 7

你不能截屏：讓你這樣做會帶來不負責任的安全風險。 但是，您可以：

• 在服務器端做事並生成圖像
• 繪制類似於 Canvas 的東西並將其渲染為圖像（在支持它的瀏覽器中）
• 使用其他一些繪圖庫直接繪制到圖像上（很慢，但可以在任何瀏覽器上使用）

Answer 8

另一個替代方法是使用GrabzIt的JavaScript API ，只需傳遞要捕獲的div的CSS選擇器即可。 然后它將創建該div的屏幕截圖。

<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
GrabzIt("YOUR APPLICATION KEY").ConvertURL("http://www.example.com/quiz.html",
{"target": "#results", "bheight": -1, "height": -1, "width": -1}).Create();
</script>

這里有更多示例解決了如何捕獲HTML元素 。 為了全面披露我是API創建者。

Answer 9

很簡單，您可以使用此代碼捕獲特定區域的屏幕截圖，您必須在 html2canvas 中定義 div id。 我在這里使用 2 div-：

div id="汽車"
div id ="chartContainer"
如果您只想捕獲汽車，那么使用汽車，我只捕獲汽車，您可以更改chartContainer以捕獲圖形html2canvas($('#car')復制並粘貼此代碼

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "light2", title:{ text: "Simple Line Chart" }, axisY:{ includeZero: false }, data: [{ type: "line", dataPoints: [ { y: 450 }, { y: 414}, { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" }, { y: 460 }, { y: 450 }, { y: 500 }, { y: 480 }, { y: 480 }, { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" }, { y: 500 }, { y: 480 }, { y: 510 } ] }] }); chart.render(); } </script> </head> <body bgcolor="black"> <div id="wholebody"> <a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a> <div id="car" align="center"> <i class="fa fa-car" style="font-size:70px;color:red;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> <i class="fa fa-car" style="font-size:50px;color:red;"></i> <i class="fa fa-car" style="font-size:20px;color:red;"></i> <i class="fa fa-car" style="font-size:50px;color:red;"></i> <i class="fa fa-car" style="font-size:60px;color:red;"></i> <i class="fa fa-car" style="font-size:70px;color:red;"></i> </div> <br> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="box1"> </div> </div>> </body> <script> function genScreenshotgraph() { html2canvas($('#car'), { onrendered: function(canvas) { var imgData = canvas.toDataURL("image/jpeg"); var pdf = new jsPDF(); pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180); pdf.save("download.pdf"); } }); } </script> </html>

Answer 10

<script src="/assets/backend/js/html2canvas.min.js"></script>


<script>
    $("#download").on('click', function(){
        html2canvas($("#printform"), {
            onrendered: function (canvas) {
                var url = canvas.toDataURL();

                var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"電子簽名詳細信息.jpeg").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            }
        });
    })
</script>

引述

Answer 11

據我所知你不能這樣做，我可能是錯的。 但是我會用 php 來做這個，使用 php 標准函數生成一個 JPEG，然后顯示圖像，應該不是一件很困難的工作，但是取決於 DIV 的內容有多華麗

Answer 12

添加到您的 html 文件並將 id="capture" 添加到您要截取屏幕截圖的 div

<a id="btn-Convert-Html2Image" href="#">Download</a>
<script src="capture.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js" type="text/javascript"></script> 

在 capture.js 添加

document.getElementById("btn-Convert-Html2Image").addEventListener("click", function() {
    html2canvas(document.getElementById("capture")).then(function (canvas) {            var anchorTag = document.createElement("a");
            anchorTag.download = "filename.jpg";
            anchorTag.href = canvas.toDataURL();
            anchorTag.target = '_blank';
            anchorTag.click();
        });
});

然后只需按 donwload 它就會下載截圖

或者您可以通過添加查看截圖 img

<div id="previewImg"></div>

在 html 代碼中，您要查看 img 和 js 代碼的位置

document.getElementById("btn-Convert-Html2Image").addEventListener("click", function() {
    html2canvas(document.getElementById("capture")).then(function (canvas) {            
            var anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            document.getElementById("previewImg").appendChild(canvas);
            anchorTag.click();
        });
});

Answer 13

據我所知，javascript 是不可能的。

您可以為每個結果做些什么創建一個屏幕截圖，將其保存在某處並在單擊保存結果時指向用戶。 （我想沒有結果只有 10 個所以創建 10 個 jpeg 結果圖像沒什么大不了的）