Computer >> Máy Tính >  >> Lập trình >> Javascript

Bạn có thể chụp ảnh màn hình của trang bằng HTML5 Canvas không?

Html2Canvas là một thư viện JavaScript có thể chụp ảnh màn hình của toàn bộ trang web hoặc một phần cụ thể. Nó không chụp ảnh màn hình nhưng tạo chế độ xem dựa trên thông tin trang.

Ví dụ

Dưới đây là một mã ví dụ. Ở đây, tập lệnh html2canvas.js được đưa vào . Phương thức html2canvas () được gọi. Trả về giá trị base64, giá trị này cuối cùng tạo ra nguồn hình ảnh hoặc tệp hình ảnh.

<!DOCTYPE html>
<html>
   <head>
      <script src="html2canvas-master/dist/html2canvas.js"></script>
   </head>
   <body>
      <h1>Take screenshot</h1>
      <div class="container" id='container' >
         <imgsrc='images/one.jpg' width='50' height='50'>
         <imgsrc='images/two.jpg' width='50' height='50'>
      </div>
      <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
      <script>
         function screenshot(){
            html2canvas(document.body).then(function(canvas) {
               document.body.appendChild(canvas);
            });
         }
      </script>
   </body>
</html>