Hướng dẫn html canvas screenshot javascript - Ảnh chụp màn hình canvas html 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
• 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

Ví dụ nhanh

How to Capture Screenshot of Page using JavaScript



    

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

Ví dụ nhanhhtml2canvas để chụp ảnh màn hình từ một trang web.Video giới thiệu