Como tirar screenshot de uma div com JavaScript?

Estou construindo algo chamado "HTML Quiz". É completamente executado em JavaScript e é bem legal.

No final, aparece uma caixa de resultados que diz "Seus resultados:" e mostra quanto tempo eles levaram, qual porcentagem eles obtiveram e quantas perguntas eles obtiveram em 10. Gostaria de ter um botão que diz "Capturar resultados" e, de alguma forma, faça uma captura de tela ou algo do div e, em seguida, apenas mostre a imagem capturada na página onde eles podem clicar com o botão direito do mouse e "Salvar imagem como".

Eu realmente adoraria fazer isso para que eles possam compartilhar seus resultados com outras pessoas. Eu não quero que eles "copiem" os resultados porque eles podem facilmente mudar isso. Se eles mudarem o que diz a imagem, tudo bem.

Alguém sabe uma maneira de fazer isso ou algo semelhante?

Não, eu não sei como fazer uma captura de tela de um elemento, mas o que você pode fazer é desenhar os resultados do questionário em um elemento de tela e usar a função HTMLCanvasElementdo objeto toDataURLpara obter um data:URI com o conteúdo da imagem.

Quando o teste terminar, faça o seguinte:

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

Quando o usuário clicar em "Capturar", faça o seguinte:

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

Isso abrirá uma nova guia ou janela com a 'captura de tela', permitindo ao usuário salvá-la. Não há como invocar um tipo de diálogo 'salvar como'; portanto, é o melhor que você pode fazer na minha opinião.

Esta é uma expansão da resposta de @ Dathan , usando html2canvas e FileSaver.js .

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


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

Esse bloco de código aguarda o btnSaveclique no botão com o ID . Quando está, converte a widgetdiv em um elemento de tela e, em seguida, usa a interface saveAs () FileSaver (via FileSaver.js em navegadores que não a suportam nativamente) para salvar a div como uma imagem chamada "Dashboard.png".

Um exemplo deste trabalho está disponível neste violino .

Após horas de pesquisa, finalmente encontrei uma solução para capturar uma captura de tela de um elemento, mesmo que o origin-cleanFLAG esteja definido (para evitar o XSS), por isso é possível capturar, por exemplo, o Google Maps (no meu caso). Eu escrevi uma função universal para obter uma captura de tela. Além disso, você só precisa da biblioteca html2canvas ( https://html2canvas.hertzen.com/ ).

Exemplo:

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

Lembre-se console.log()e alert()não gerará saída se o tamanho da imagem for ótimo.

Função:

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

Se você deseja ter a caixa de diálogo "Salvar como", basta passar a imagem para o script php, que adiciona cabeçalhos apropriados

Exemplo de script "all-in-one" 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>

Você não pode fazer uma captura de tela: seria um risco de segurança irresponsável permitir que você o faça. No entanto, você pode:

• Faça coisas do lado do servidor e gere uma imagem
• Desenhe algo semelhante a um Canvas e o renderize a uma imagem (em um navegador compatível)
• Use alguma outra biblioteca de desenhos para desenhar diretamente na imagem (lenta, mas funcionaria em qualquer navegador)

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

Dê uma olhada no pacote htmlshot e verifique profundamente a seção do lado do cliente :

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>

cotação

É simples: você pode usar esse código para capturar a captura de tela de uma área específica, para definir o ID da div em html2canvas. Estou usando aqui 2 div-:

div id = "carro"
div id = "chartContainer"
se você quiser capturar apenas carros, então use car eu estou capturando aqui carro, apenas você pode alterar o chartContainer para capturar o gráfico html2canvas ($ ( '#car') copie e cole este código

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

Tanto quanto sei que você não pode fazer isso, posso estar errado. No entanto, eu faria isso com o php, geraria um JPEG usando as funções padrão do php e depois exibia a imagem, não deve ser um trabalho muito difícil, mas depende de quão chamativo o conteúdo do DIV é

Tanto quanto eu sei, não é possível com javascript.

O que você pode fazer para cada resultado cria uma captura de tela, salve-a em algum lugar e aponte o usuário quando clicar em Salvar resultado. (Eu acho que nenhum resultado é apenas 10, então não é grande coisa criar 10 jpegs de imagem)