Hướng dẫn screenshot javascript - ảnh chụp màn hình javascript

Chúng ta sẽ xem ba cách khác nhau để chụp ảnh màn hình của một trang web bằng JavaScript. Ba phương pháp này cung cấp các giải pháp để chụp ảnh màn hình có và không sử dụng thư viện.

1. Sử dụng thư viện JavaScript html2canvas.
2. Sử dụng HTML5 thuần túy với JavaScript.
3. Sử dụng phương pháp getDisplayMedia của WebRTC.

• 1) Sử dụng thư viện JavaScript html2canvas
  • Ví dụ nhanh
  • Đẩy ảnh chụp màn hình sang PHP để lưu
• 2) Sử dụng HTML5 thuần túy với JavaScript
• 3) Sử dụng phương thức getDisplayMedia của WebRTC

1) Sử dụng thư viện JavaScript html2canvas

Ví dụ nhanhhtml2canvas để chụp ảnh màn hình từ một trang web.

Đẩy ảnh chụp màn hình sang PHP để lưu

• 2) Sử dụng HTML5 thuần túy với JavaScript
• 3) Sử dụng phương thức getDisplayMedia của WebRTC
• Phương pháp này sử dụng thư viện JS phổ biến html2canvas để chụp ảnh màn hình từ một trang web.
• Tập lệnh này thực hiện các bước dưới đây để chụp ảnh màn hình từ HTML của trang.
• Nó khởi tạo html2canvas thư viện và cung cấp HTML nội dung cho nó.

Nó đặt mục tiêu để nối ảnh chụp màn hình đầu ra vào nội dung HTML.

Ví dụ nhanh

    

        
How to Capture Screenshot of Page using JavaScript
        

            Capture Screenshot
        
    

    

Đẩy ảnh chụp màn hình sang PHP để lưu

Đẩy ảnh chụp màn hình sang PHP để lưu

2) Sử dụng HTML5 thuần túy với JavaScript

3) Sử dụng phương thức getDisplayMedia của WebRTC

 $_POST['image']
    );
    $contentArray[] = $screenshotImage;
    $fullData = json_encode($contentArray);
    file_put_contents('screenshot.json', $fullData);
    fclose($screenshotJson);
}
?>

Phương pháp này sử dụng thư viện JS phổ biến html2canvas để chụp ảnh màn hình từ một trang web.
Video giới thiệu

2) Sử dụng HTML5 thuần túy với JavaScript

3) Sử dụng phương thức getDisplayMedia của WebRTC

Phương pháp này sử dụng thư viện JS phổ biến html2canvas để chụp ảnh màn hình từ một trang web.

Tập lệnh này thực hiện các bước dưới đây để chụp ảnh màn hình từ HTML của trang.BÃI sự vật.

Nó khởi tạo html2canvas thư viện và cung cấp HTML nội dung cho nó.

Nó đặt mục tiêu để nối ảnh chụp màn hình đầu ra vào nội dung HTML.

Tạo phần tử canvas và gắn vào 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) Sử dụng phương thức getDisplayMedia của WebRTC

Phương pháp này sử dụng thư viện JS phổ biến html2canvas để chụp ảnh màn hình từ một trang web.

Tập lệnh này thực hiện các bước dưới đây để chụp ảnh màn hình từ HTML của trang.getDisplayMedia () của lớp này để trả về luồng phương tiện của nội dung trang hiện tại.

Nó khởi tạo html2canvas thư viện và cung cấp HTML nội dung cho nó.Nó cần cấp quyền để có được toàn bộ hoặc một phần nội dung trang trên màn hình.

Nó đặt mục tiêu để nối ảnh chụp màn hình đầu ra vào nội dung HTML.

Tạo phần tử canvas và gắn vào HTML.

Nó lấy URL dữ liệu nguồn hình ảnh từ đối tượng canvas.

Đẩy URL nguồn sang PHP thông qua AJAX để lưu ảnh chụp màn hình vào máy chủ.

capture-screenshot / index.html

    

        
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.
        
getDisplayMedia() is part of WebRTC and is used for
            screen sharing. Video is rendered and then page screenshot
            is captured from the video.
        

        

            Capture
                Screenshot
        
    
    

Chúng tôi đã sử dụng thư viện này trong việc tạo mã các phần tử canvas với dữ liệu động. Ví dụ: chúng tôi đã sử dụng html2canvas để tạo các tệp PDF hóa đơn từ HTML bằng JavaScript.

Tập lệnh PHP này đọc các tệp nhị phân ảnh chụp màn hình được đăng qua AJAX. Nó chuẩn bị các thuộc tính ảnh chụp màn hình ở định dạng JSON.