Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

สามารถถ่ายรูปหน้าจอ (Screenshot) ด้วย HTML5 Canvas ได้หรือไม่?

Html2Canvas เป็นไลบรารี JavaScript ที่สร้างภาพหน้าเว็บจาก DOM ไม่ใช่ screenshot จริง แต่ render จากข้อมูลหน้าเว็บ

ตัวอย่าง

<!DOCTYPE html>
<html>
  <head>
    <script src="html2canvas-master/dist/html2canvas.js"></script>
  </head>
  <body>
    <h1>Take screenshot</h1>
    <div class="container" id="container">
      <img src="images/one.jpg" width="50" height="50">
      <img src="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>