Làm cách nào để chụp ảnh màn hình của div với JavaScript?

Tôi đang xây dựng một thứ gọi là "Câu đố HTML". Nó hoàn toàn chạy trên JavaScript và nó khá tuyệt.

Cuối cùng, một hộp kết quả bật lên có nội dung "Kết quả của bạn:" và nó cho biết họ đã mất bao nhiêu thời gian, bao nhiêu phần trăm và bao nhiêu câu hỏi họ nhận được ngay từ 10. Tôi muốn có một nút nói "Chụp kết quả" và bằng cách nào đó hãy chụp ảnh màn hình hoặc một cái gì đó của div, sau đó chỉ hiển thị hình ảnh được chụp trên trang nơi họ có thể nhấp chuột phải và "Lưu hình ảnh dưới dạng".

Tôi thực sự rất thích làm điều này để họ có thể chia sẻ kết quả của họ với người khác. Tôi không muốn họ "sao chép" kết quả vì họ có thể dễ dàng thay đổi điều đó. Nếu họ thay đổi những gì nó nói trong hình ảnh, oh tốt.

Có ai biết một cách để làm điều này hoặc một cái gì đó tương tự?

Không, tôi không biết cách 'ảnh chụp màn hình' một yếu tố, nhưng những gì bạn có thể làm là vẽ kết quả bài kiểm tra thành một yếu tố canvas, sau đó sử dụng chức năng HTMLCanvasElementcủa đối tượng toDataURLđể lấy data:URI với nội dung của hình ảnh.

Khi bài kiểm tra kết thúc, làm điều này:

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 */

Khi người dùng nhấp vào "Chụp", hãy làm điều này:

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

Điều này sẽ mở một tab hoặc cửa sổ mới với 'ảnh chụp màn hình', cho phép người dùng lưu nó. Không có cách nào để gọi một hộp thoại 'lưu dưới dạng', vì vậy đây là cách tốt nhất bạn có thể làm theo ý kiến ​​của tôi.

Đây là bản mở rộng câu trả lời của @ Dathan , sử dụng html2canvas và FileSaver.js .

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


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

Khối mã này chờ nút có id btnSaveđược nhấp. Khi có, nó chuyển đổi widgetdiv thành một phần tử canvas và sau đó sử dụng giao diện SaveS () FileSaver (thông qua FileSaver.js trong các trình duyệt không hỗ trợ nó) để lưu div dưới dạng hình ảnh có tên "Dashboard.png".

Một ví dụ về công việc này có sẵn tại fiddle này .

Sau nhiều giờ nghiên cứu, cuối cùng tôi cũng tìm được giải pháp chụp ảnh màn hình của một yếu tố, ngay cả khi origin-cleanFLAG được đặt (để ngăn XSS), đó là lý do tại sao bạn thậm chí có thể chụp ví dụ Google Maps (trong trường hợp của tôi). Tôi đã viết một chức năng phổ quát để có được một ảnh chụp màn hình. Điều duy nhất bạn cần ngoài ra là thư viện html2canvas ( https://html2canvas.hertzen.com/ ).

Thí dụ:

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);
});

Hãy ghi nhớ console.log()và alert()giành được đầu ra tạo ra nếu kích thước của hình ảnh là tuyệt vời.

Chức năng:

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
    });
}

Nếu bạn muốn có hộp thoại "Lưu dưới dạng", chỉ cần chuyển hình ảnh vào tập lệnh php, thêm tiêu đề thích hợp

Ví dụ tập lệnh "tất cả trong một" 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>

Một cách khác là sử dụng API JavaScript của GrabzIt, tất cả những gì bạn cần làm là vượt qua bộ chọn CSS của div bạn muốn chụp. Sau đó, nó sẽ tạo ra một ảnh chụp màn hình của 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>

Có nhiều ví dụ ở đây giải quyết cách nắm bắt các yếu tố HTML . Để tiết lộ đầy đủ, tôi là người tạo API.

Bạn không thể chụp ảnh màn hình: sẽ là một rủi ro bảo mật vô trách nhiệm khi để bạn làm như vậy. Tuy nhiên, bạn có thể:

• Làm những thứ phía máy chủ và tạo một hình ảnh
• Vẽ một cái gì đó tương tự như Canvas và hiển thị nó thành hình ảnh (trong trình duyệt hỗ trợ nó)
• Sử dụng một số thư viện vẽ khác để vẽ trực tiếp lên hình ảnh (chậm, nhưng sẽ hoạt động trên mọi trình duyệt)

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

Hãy xem gói htmlshot , sau đó, kiểm tra sâu phần phía máy khách :

npm install htmlshot

<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>

bảng báo giá

Thật đơn giản, bạn có thể sử dụng mã này để chụp ảnh màn hình của khu vực cụ thể mà bạn phải xác định id id trong html2canvas. Tôi đang sử dụng ở đây 2 div-:

div id = "xe hơi"
div id = "chartContainer"
nếu bạn muốn chụp chỉ chiếc xe sau đó sử dụng xe tôi chụp ở đây xe duy nhất bạn có thể thay đổi chartContainer để chụp đồ thị html2canvas ($ ( '#car') sao chép và dán mã này

<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>

Theo như tôi biết bạn không thể làm điều đó, tôi có thể sai. Tuy nhiên, tôi sẽ làm điều này với php, tạo JPEG bằng các hàm tiêu chuẩn php và sau đó hiển thị hình ảnh, không phải là một công việc rất khó khăn, tuy nhiên phụ thuộc vào mức độ hào nhoáng của nội dung của DIV

Theo như tôi biết thì không thể với javascript.

Những gì bạn có thể làm cho mỗi kết quả tạo ảnh chụp màn hình, lưu nó ở đâu đó và trỏ người dùng khi nhấp vào lưu kết quả. (Tôi đoán không có kết quả nào chỉ là 10 nên không phải là vấn đề lớn để tạo ra hình ảnh 10 jpeg kết quả)