cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah anda mengambil tangkapan skrin halaman menggunakan HTML5 Canvas?

Bolehkah anda mengambil tangkapan skrin halaman menggunakan HTML5 Canvas?

WBOY
WBOYke hadapan
2023-09-07 10:45:08719semak imbas

你能使用HTML5 Canvas在页面上截取一张屏幕截图吗？

Html2Canvas ialah perpustakaan JavaScript yang boleh mengambil tangkapan skrin keseluruhan halaman web atau bahagian tertentu. Ia tidak mengambil tangkapan skrin, tetapi mencipta paparan berdasarkan maklumat halaman.

Contoh

Diberikan di bawah ialah kod sampel. Di sini, skrip html2canvas.js disertakan dalam

. Panggil kaedah html2canvas(). Mengembalikan nilai base64 yang akhirnya mencipta sumber imej atau fail imej. 
<!DOCTYPE html>
<html>
   <head>
      <script src="html2canvas-master/dist/html2canvas.js"></script>
   </head>
   <body>
      <h1>Take screenshot</h1>
      <div class="container" id=&#39;container&#39; >
         <imgsrc=&#39;images/one.jpg&#39; width=&#39;50&#39; height=&#39;50&#39;>
         <imgsrc=&#39;images/two.jpg&#39; width=&#39;50&#39; height=&#39;50&#39;>
      </div>
      <input type=&#39;button&#39; id=&#39;but_screenshot&#39; value=&#39;Take screenshot&#39; onclick=&#39;screenshot();&#39;><br/>
      <script>
         function screenshot(){
            html2canvas(document.body).then(function(canvas) {
               document.body.appendChild(canvas);
            });
         }
      </script>
   </body>
</html>

Atas ialah kandungan terperinci Bolehkah anda mengambil tangkapan skrin halaman menggunakan HTML5 Canvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html5 JS canvas
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan lebar jadual dalam HTML?Artikel seterusnya：Bagaimana untuk menetapkan lebar jadual dalam HTML?

Artikel berkaitan

Lihat lagi