Cara mengambil tangkapan layar halaman menggunakan JavaScript

Programming

Oleh Vinci terakhir diubah pada 19 September 2022.

Kita akan melihat tiga cara berbeda untuk mengambil screenshot halaman web menggunakan JavaScript. Ketiga metode ini memberikan solusi untuk mengambil screenshot dengan dan tanpa menggunakan library.

  1. Menggunakan pustaka JavaScript html2canvas.
  2. Menggunakan HTML5 sederhana dengan JavaScript.
  3. Menggunakan metode getDisplayMedia WebRTC.

1) Menggunakan perpustakaan JavaScript html2canvas

Metode ini menggunakan perpustakaan JS populer html2kanvas Untuk mengambil screenshot halaman web.

Script ini mengimplementasikan langkah-langkah berikut untuk mengambil screenshot halaman HTML.

  • Inisialisasi html2kanvas Ini menyediakan kelas perpustakaan dan badan HTML.
  • Menetapkan target untuk menambahkan gambar keluaran ke badan HTML.
  • Menghasilkan elemen kanvas dan menambahkannya ke HTML.
  • Mendapatkan URL data sumber gambar dari objek kanvas.
  • Dorong URL sumber daya ke PHP melalui AJAX untuk menyimpan tangkapan layar di server.

capture-screenshot/index.html

Contoh cepat

<!DOCTYPE html>
<html>
<head>
<title>How to Capture Screenshot of Page using JavaScript</title>
<link rel="stylesheet" href="https://phppot.com/javascript/capture-screenshot-javascript/form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <h1>How to Capture Screenshot of Page using JavaScript</h1>
        <p>
            <button id="capture-screenshot">Capture Screenshot</button>
        </p>
    </div>

    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"
    src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">  
        $('#capture-screenshot').click(function() {
            const screenshotTarget = document.body;
            html2canvas(screenshotTarget).then(canvas => {
            	// to image as png use below line
                // const base64image = canvas.toDataURL("image/png");
            	// show the image in window use below line
                // window.location.href = base64image;
            	
            	// screenshot appended to the body as canvas
                document.body.appendChild(canvas);  
                dataURL = canvas.toDataURL();  
                // to print the screenshot in console use below line
                // console.log(dataURL);
                
                // following line is optional and it is to save the screenshot
                // on the server side. It initiates an ajax call
                pushScreenshotToServer(dataURL); 
            });  
        });
  
        function pushScreenshotToServer(dataURL) {  
            $.ajax({ 
                url: "push-screenshot.php",  
                type: "POST",  
                data: {  
                    image: dataURL  
                },  
                dataType: "html", 
                success: function() {  
                	console.log('Screenshot pushed to server.');
                }  
            });  
        }  
    </script>
</body>
</html>

Kami telah menggunakan pustaka ini dalam kode yang menghasilkan elemen kanvas dengan data dinamis. Misalnya, kami menggunakan html2canvas untuk membuat faktur PDF dari HTML menggunakan JavaScript.

Mengambil tangkapan layar JavaScript

Klik pada PHP untuk menyimpan tangkapan layar

Skrip PHP ini membaca binari tangkapan layar yang dikirim melalui AJAX. Menyiapkan properti tangkapan layar dalam format JSON.

capture-screenshot/push-screenshot.php

<?php
if (isset($_POST['image'])) {
    // should have read and write permission to the disk to write the JSON file
    $screenshotJson = fopen("screenshot.json", "a") or die("Unable to open screenshot.json file.");
    $existingContent = file_get_contents('screenshot.json');
    $contentArray = json_decode($existingContent, true);
    $screenshotImage = array(
        'imageURL' => $_POST['image']
    );
    $contentArray[] = $screenshotImage;
    $fullData = json_encode($contentArray);
    file_put_contents('screenshot.json', $fullData);
    fclose($screenshotJson);
}
?>

Keluaran ini “screenshot.json” File dengan URL data gambar dan simpan dalam program.
Video demo

2) Gunakan HTML5 biasa dengan JavaScript

Kode JavaScript ini berisi dua fungsi. Salah satunya adalah membuat URL objek gambar dan yang lainnya adalah mengambil tangkapan layar dengan menyiapkan objek blob dari halaman.

Menyiapkan objek gumpalan URL yang mewakili gambar keluaran dari tangkapan layar yang diambil dari halaman. Mengklik tombol “Ambil tangkapan layar” di antarmuka pengguna akan mengambil tangkapan layar.

Ini mengontrol gaya dan properti koordinat gulir dari simpul yang didorong ke objek tangkapan layar. Ini untuk mencegah pengguna mengontrol mouse noda Tujuan – objek.

Pada contoh sebelumnya, kita melihat cara membuat blob dan menyimpannya di database MySQL.

Kode ini akan menampilkan tangkapan layar yang diambil di halaman baru. Halaman baru akan memiliki URL gumpalan yang dibuat sebagai gumpalan: http://localhost/0212cfc1-02ab-417c-b92f-9a7fe613808c

html5-javascript/index.html

function takeScreenshot() {
	var screenshot = document.documentElement
		.cloneNode(true);
	screenshot.style.pointerEvents="none";
	screenshot.style.overflow = 'hidden';
	screenshot.style.webkitUserSelect="none";
	screenshot.style.mozUserSelect="none";
	screenshot.style.msUserSelect="none";
	screenshot.style.oUserSelect="none";
	screenshot.style.userSelect="none";
	screenshot.dataset.scrollX = window.scrollX;
	screenshot.dataset.scrollY = window.scrollY;
	var blob = new Blob([screenshot.outerHTML], {
		type: 'text/html'
	});
	return blob;
}

function generate() {
	window.URL = window.URL || window.webkitURL;
	window.open(window.URL
		.createObjectURL(takeScreenshot()));
}

3) Menggunakan metode getDisplayMedia WebRTC

Metode ini menggunakan kelas JavaScript MediaServices untuk mengambil tangkapan layar konten halaman.

Contoh ini getDisplayMedia() kelas ini untuk mengembalikan aliran media konten halaman saat ini.

Catatan: Itu harus memungkinkan untuk menampilkan semua atau sebagian dari konten halaman.

Menyiapkan sumber gambar untuk menggambar ke kanvas dengan merujuk teksturnya. Setelah menulis objek aliran media menjadi teks, skrip ini mengubah kanvas menjadi URL data.

URL data ini digunakan untuk melihat tangkapan layar yang diambil di halaman baru.

Setelah membaca objek aliran media menjadi objek elemen tangkapan layar, itu harus ditutup. JS MediaStreamTrack.stop() digunakan untuk menutup trek saat tidak diperlukan.

JavaScript forEach ini berulang melalui larik objek MediaStream hingga instance lagu berhenti.

webrtc-get-display-media/index.html

<!DOCTYPE html>
<html>
<head>
<title>How to Capture Sceenshot of Page using JavaScript</title>
<link rel="stylesheet" href="https://phppot.com/javascript/capture-screenshot-javascript/form.css" type="text/css" />
</head>
<body>
    <div class="phppot-container">
        <p>This uses the WebRTC standard to take screenshot. WebRTC
            is popular and has support in all major modern browsers. It
            is used for audio, video communication.</p>
        <p>getDisplayMedia() is part of WebRTC and is used for
            screen sharing. Video is rendered and then page screenshot
            is captured from the video.</p>
        <p>
        <p>
            <button id="capture-screenshot"
                onclick="captureScreenshot();">Capture
                Screenshot</button>
        </p>
    </div>
    <script>
    const captureScreenshot = async () => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");
        const screenshot = document.createElement("screenshot");
    
        try {
            const captureStream = await navigator.mediaDevices.getDisplayMedia();
            screenshot.srcObject = captureStream;
            context.drawImage(screenshot, 0, 0, window.width, window.height);
            const frame = canvas.toDataURL("image/png");
            captureStream.getTracks().forEach(track => track.stop());
            window.location.href = frame;
        } catch (err) {
            console.error("Error: " + err);
        }
    };
    </script>
</body>
</html>

Unduh video demonya

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *