Bolehkah anda mengambil tangkapan skrin halaman menggunakan HTML5 Canvas?-html tutorial-php.cn

Bolehkah anda mengambil tangkapan skrin halaman menggunakan HTML5 Canvas?

WBOY

Lepaskan： 2023-09-07 10:45:08

ke hadapan

687 orang telah melayarinya

你能使用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>

Salin selepas log masuk

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!