JavaScript ile div'in ekran görüntüsünü nasıl alabilirim?

"HTML Quiz" adlı bir şey yapıyorum. Tamamen JavaScript ile çalıştı ve oldukça havalı.

Sonunda, "Sonuçlarınız:" yazan bir sonuç kutusu açılır ve ne kadar zaman aldıklarını, yüzde kaçını ve 10'dan kaç soru aldıklarını gösterir. "Yakalama sonuçları" ve bir şekilde bir ekran görüntüsü veya div bir şey almak ve sonra sadece sağ tıklayın ve "Görüntüyü farklı kaydet."

Sonuçlarını başkalarıyla paylaşabilmeleri için bunu gerçekten yapmak isterim. Sonuçları "kopyalamasını" istemiyorum çünkü bunu kolayca değiştirebiliyorlar. Eğer görüntüde söylediklerini değiştirirlerse, oh iyi.

Bunu yapmanın bir yolunu veya benzeri bir şey bilen var mı?

Hayır, bir öğeyi 'ekran görüntüsü' almanın bir yolunu bilmiyorum, ancak yapabileceğiniz şey, sınav sonuçlarını bir tuval öğesine çizmektir, daha sonra görüntünün içeriğiyle bir URI almak için HTMLCanvasElementnesnenin toDataURLişlevini kullanmaktır data:.

Sınav bittiğinde şunu yapın:

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

Kullanıcı "Yakala" yı tıkladığında şunu yapın:

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

Bu, kullanıcının ekran görüntüsünü kaydetmesini sağlayan 'ekran görüntüsü' ile yeni bir sekme veya pencere açar. Bir tür 'farklı kaydet' iletişim kutusunu çağırmanın bir yolu yoktur, bu yüzden bence yapabileceğiniz en iyi şey budur.

Bu html2canvas ve FileSaver.js kullanan @ Dathan'ın cevabının bir uzantısıdır .

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


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

Bu kod bloğu, kimliğine sahip düğmenin btnSavetıklanmasını bekler . Bu olduğunda, widgetdiv'ı bir tuval öğesine dönüştürür ve sonra div'ı "Dashboard.png" adlı bir görüntü olarak kaydetmek için saveAs () FileSaver arabirimini (yerel olarak desteklemeyen tarayıcılarda FileSaver.js aracılığıyla) kullanır.

Bu çalışmanın bir örneği bu kemanda mevcuttur .

Saatler süren bir araştırmadan sonra, bir öğenin ekran görüntüsünü almak için bir çözüm buldum, origin-clean FLAG ayarlanmış (XSS'yi önlemek için) , bu yüzden örneğin Google Haritalar'ı (benim durumumda) bile yakalayabilirsiniz. Ekran görüntüsü almak için evrensel bir işlev yazdım. İhtiyacınız olan tek şey html2canvas kütüphanesidir ( https://html2canvas.hertzen.com/ ).

Misal:

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

Unutmayın console.log()ve alert()görüntünün boyutu büyük ise çıktı üretmek Yapmayacağım.

İşlev:

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

"Farklı kaydet" iletişim kutusuna sahip olmak istiyorsanız, resmi uygun başlıklar ekleyen php komut dosyasına geçirmeniz yeterlidir

Örnek "hepsi bir arada" komut dosyası 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>

Ekran görüntüsü alamazsınız: bunu yapmanıza izin vermek sorumsuz bir güvenlik riski olacaktır. Ancak şunları yapabilirsiniz:

• Sunucu tarafında bir şeyler yapın ve bir görüntü oluşturun
• Tuval'e benzer bir şey çizin ve bunu bir görüntüye dönüştürün (onu destekleyen bir tarayıcıda)
• Doğrudan görüntüye çizim yapmak için başka bir çizim kitaplığı kullanın (yavaş, ancak herhangi bir tarayıcıda çalışır)

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

Htmlshot'a bir göz atın paketine , ardından istemci tarafı bölümünü derinlemesine kontrol edin :

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>

alıntı

Bu kodu, html2canvas'ta div kimliğini tanımlamanız gereken belirli bir alanın ekran görüntüsünü yakalamak için kullanabilirsiniz. Ben burada kullanıyorum 2 div-:

div id = "araba"
div id = "chartContainer"
Eğer sadece araba yakalamak istiyorsanız o zaman araba kullanın Ben burada araba yakalama sadece sen grafik değiştirmek için grafikContainer değiştirebilirsiniz html2canvas ($ ( '#car') bu kodu kopyalayıp yapıştırın

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

Bildiğim kadarıyla bunu yapamazsın, yanılmış olabilirim. Ancak ben php ile bunu yapmak, php standart fonksiyonları kullanarak bir JPEG oluşturmak ve daha sonra görüntüyü göstermek, çok zor bir iş olmamalı, ancak DIV içeriği ne kadar gösterişli bağlıdır

Bildiğim kadarıyla javascript ile mümkün değil.

Her sonuç için yapabilecekleriniz bir ekran görüntüsü oluşturun, bir yere kaydedin ve sonucu kaydet'i tıkladığınızda kullanıcıyı işaret edin. (Sonuçların hiçbiri sadece 10 değil, bu yüzden sonuçların 10 jpeg görüntüsünü oluşturmak için büyük bir anlaşma değil)