Chụp ảnh màn hình khi nhấp vào nút javascript

Nội dung chính Show

Để chụp ảnh màn hình, chỉ cần hai bước. -
Bước 1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
Bước 2. Tạo một tệp PHP để lưu và tải xuống ảnh chụp màn hình
Phần kết luận
Làm cách nào để chụp ảnh màn hình bằng JavaScript?
Có thể chụp ảnh màn hình bằng cách nhấn phím chèn không?
Chúng tôi có thể tự động chụp ảnh màn hình không?

Để chụp ảnh màn hình, chỉ cần hai bước. -

Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
Tạo một tệp PHP để lưu và tải xuống ảnh chụp màn hình

Bước 1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản

Chúng tôi tạo một tệp HTML và lưu nó với ảnh chụp màn hình tên. html

Take Screenshot

Trong bước này, trước tiên chúng tôi chèn cả hai tệp jQuery để quá trình này hoạt động, sau đó chúng tôi tạo một nút đơn giản để chụp ảnh màn hình bất cứ khi nào người dùng nhấp vào nút 'Chụp ảnh màn hình'. Hàm take_screenshot được gọi là chức năng chính để chụp màn hình và tạo ảnh của . php để lưu và tải xuống hình ảnh

Bạn cũng có thể thích Tạo Bộ đếm PageView đơn giản bằng PHP và MySQL

Bước 2. Tạo một tệp PHP để lưu và tải xuống ảnh chụp màn hình

Chúng tôi tạo một tệp PHP và lưu nó với tên save_screenshot. php

Trong bước này, chúng tôi tạo hai nếu điều kiện đầu tiên được sử dụng để tải xuống ảnh chụp màn hình đã lưu và thứ hai được sử dụng để lưu ảnh chụp màn hình

Hãy bắt đầu với điều kiện thứ hai nếu trong trường hợp này, chúng tôi nhận dữ liệu hình ảnh được gửi bởi hàm take_screenshot() và sau đó chúng tôi lưu hình ảnh vào thư mục. Trong điều kiện đầu tiên, trước tiên chúng tôi kiểm tra xem tệp có tồn tại không, nếu có thì chúng tôi chèn tất cả các tiêu đề cần thiết để tải xuống tệp

Bạn cũng có thể thích Thay đổi thiết kế của tất cả các thành phần trong một trang web bằng JavaScript và CSS

Đó là tất cả, đây là cách chụp Ảnh màn hình trang web bằng HTML5 và JavaScript. Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này

Nếu bạn đang tìm cách chụp ảnh màn hình trang web hoặc phần tử bằng JavaScript, thì blog này là dành cho bạn. Trong blog này, bạn sẽ học cách chụp ảnh màn hình và tải chúng xuống dễ dàng bằng JavaScript bằng thư viện html2canvas

Như bạn đã biết, ảnh chụp màn hình có thể là một phần quan trọng và có giá trị của các ứng dụng web. Ảnh chụp màn hình được sử dụng cho nhiều mục đích trong ứng dụng. Các công ty như Google sử dụng chúng trong biểu mẫu phản hồi của họ trong khi nhận phản hồi hoặc báo cáo từ người dùng

Hãy nói về cách sử dụng thư viện html2canvas để chụp ảnh màn hình và tải xuống ảnh chụp màn hình trực tiếp trên thiết bị của người dùng. Hãy nhớ rằng, html2canvas sẽ chỉ được sử dụng để chụp ảnh màn hình. Để tải xuống ảnh chụp màn hình, sẽ sử dụng canvas JavaScript

Để chụp ảnh màn hình và tải xuống bằng html2canvas & JavaScript, hãy thực hiện theo từng bước đã cho

Tạo một chỉ mục. html và dán mã đã cho. Nếu bạn xem kỹ mã, tôi đã nhập thư viện html2canvas trước khi đóng . Có hai nút cũng được sử dụng để chụp ảnh màn hình và tải xuống ảnh chụp màn hình

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Take Screenshot using JavaScript</title>
    <!-- Imported html2canvas library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
    <!-- Dummpy data to take screenshot -->
    <h1>Take Screenshot & Download it</h1>
    <ul>
        <li>This is a dummy list 1</li>
        <li>This is a dummy list 2</li>
        <li>This is a dummy list 3</li>
        <li>This is a dummy list 4</li>
    </ul>
    <a href="#">Dummy Link</a>
    <br>
    <p>Click the specific button to take 
        <strong>screenshot</strong> or 
        <strong>download the screenshot</strong> 
        of this page.
    </p>
    <button id="take-src-only">Take Screenshot</button>
    <button>Take Screenshot & Download</button>
    <br><br>

    <!-- Paste the script codes here -->
</body>
</html>

Khi bạn thực hiện bước trên. Dán các mã đã cho trước khi đóng

<script>
  const srcElement = document.querySelector("body"),
  btns = document.querySelectorAll("button");

  btns.forEach(btn => { // looping through each btn
    // adding click event to each btn
    btn.addEventListener("click", () => {
      // creating canvas of element using html2canvas
      html2canvas(srcElement).then(canvas => {
        // adding canvas/screenshot to the body
        if(btn.id === "take-src-only") {
          return document.body.appendChild(canvas);
        }

        // downloading canvas/screenshot
        const a = document.createElement("a");
        a.href = canvas.toDataURL();
        a.download = "screenshot.jpg";
        a.click();
      });
    });
  });
</script>

Vậy là xong, bây giờ bạn đã sẵn sàng để chụp ảnh màn hình của trang web và tải xuống. Trong các mã, tôi đã chuyển nội dung dưới dạng thành phần ảnh chụp màn hình, nhưng bạn có thể chuyển bất kỳ thành phần nào và chụp ảnh màn hình của thành phần đó theo yêu cầu của bạn

Phần kết luận

html2canvas không thực sự chụp ảnh màn hình của trang web. Nó xây dựng một biểu diễn của trang dựa trên các thuộc tính mà nó đọc được từ DOM và trả về khung vẽ dưới dạng hình ảnh. Vì vậy, hình ảnh nó trả về có thể không chính xác 100% so với trang gốc. Đọc thêm về thư viện html2canvas

Nếu không biết, bạn cũng có thể chụp ảnh màn hình bằng JavaScript thuần túy. Để biết thêm, hãy đọc blog này. Cách chụp ảnh màn hình trong Vanilla JavaScript

Làm cách nào để chụp ảnh màn hình bằng JavaScript?

1) Sử dụng thư viện JavaScript html2canvas . Tạo phần tử canvas và nối vào HTML. Nó lấy URL dữ liệu nguồn hình ảnh từ đối tượng canvas. Đẩy URL nguồn vào PHP thông qua AJAX để lưu ảnh chụp màn hình vào máy chủ.

Có thể chụp ảnh màn hình bằng cách nhấn phím chèn không?

Trên máy tính để bàn hoặc máy tính xách tay của bạn, nhấn nút In màn hình trên bàn phím để chụp ảnh màn hình . Bạn cũng có thể chụp ảnh màn hình bằng phím tắt CTRL + Print Screen. Windows chụp ảnh toàn màn hình và lưu vào clipboard. Tiếp theo, dán hình ảnh từ khay nhớ tạm vào công cụ chỉnh sửa hình ảnh như Paint.

Chúng tôi có thể tự động chụp ảnh màn hình không?

Kiểm tra ảnh chụp màn hình tự động sẽ giúp bạn chụp hàng loạt ảnh chụp màn hình thông qua các máy tính để bàn và thiết bị di động khác nhau chạy trên nhiều hệ điều hành khác nhau trong một lần duy nhất . Nó được hỗ trợ bởi các trường hợp thử nghiệm giao diện người dùng có công cụ để giúp bạn nhận ra ứng dụng web của mình hiển thị liền mạch như thế nào thông qua các kích thước màn hình khác nhau bằng các trình duyệt khác nhau.