Cách chụp màn hình thẻ div bằng JavaScript

Đôi khi, bạn có thể muốn chụp ảnh màn hình của một thẻ div bằng JavaScript.

Trong bài viết này, tôi sẽ cùng bạn học cách chụp ảnh màn hình của thẻ div bằng JavaScript.

Thẻ div là gì? 

div – viết tắt của division – là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ trong HTML đều có mục đích khác nhau. Ví dụ như thẻ <p> (viết tắt của paragraph) được dùng để chỉ định một đoạn văn bản nhất định, hay thẻ <br> dùng để ngắt đoạn văn bản trong HTML.

Thẻ <div> là thẻ đánh dấu một khối (block) gồm nhiều thẻ khác trong khối. Như tên gọi, thẻ <div> giúp các tài liệu HTML được chia thành các phần (khối) riêng biệt. 

Tác dụng của thẻ div trong HTML

Thẻ div được dùng để nhóm các phần tử lại với nhau trong các khu vực của website. Các khu vực đó bao gồm: header (nhóm nội dung ở đầu trang web), global navigation (liên kết giữa các trang trong website), page body (thân nội dung của trang), content (gồm text và hình ảnh của bài), sidebar (nội dung phụ chạy dọc hai bên trái phải trang web), footer (nhóm nội dung ở cuối trang web).

Ngoài ra, một số cấu trúc hoặc các khu vực lớn bên trong chứa nhiều thẻ cũng được khuyên dùng thẻ div để phân nhóm. Việc nhóm các cấu trúc lại bằng thẻ <div></div> sẽ giúp cho quá trình định dạng, điều khiển,… nguyên cụm dễ dàng hơn rất nhiều. Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng có gắn thẻ div là khối nội dung đó sẽ thay đổi như yêu cầu. 

Bạn hãy cùng xem ví dụ mẫu dưới đây để hiểu rõ hơn tác dụng của thẻ div là gì trong HTML 

<div style="front-size:20px; color:red">
<p> dinh nghia the div la gi </p>
<p> tac dung cua the div trong HTML </p>
<p> phan biet su khac nhau giua the span va the div </p>
</div>Code language: HTML, XML (xml)

Kết quả của đoạn code trên như sau

dinh nghia the div la gi

tac dung cua the div trong HTML

phan biet su khac nhau giua the span va the div

Trong ví dụ trên, nguyên cụm text gồm 3 dòng được nhóm lại. Chúng có chung định dạng cỡ chữ size 20 và màu chữ là đỏ. Nếu bạn muốn thay cả cụm 3 dòng này thành màu xanh dương, chỉ cần thay giá trị “red” trong câu lệnh bằng “blue” là được. 

Sử dụng thư viện html2canvas để chụp màn hình thẻ div

Bạn có thể sử dụng thư viện html2canvas để chụp div dưới dạng hình ảnh và đưa nó vào phần tử canvas.

Để sử dụng nó, chúng ta có thể thêm thư viện bằng thẻ script bằng cách viết:

<script src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'></script>Code language: HTML, XML (xml)

Tôi cũng có thể cài đặt nó với NPM bằng cách chạy:

npm install --save html2canvas

Hoặc mình có thể cài đặt nó với Yarn bằng cách chạy:

yarn add html2canvas

Tiếp theo, bạn có thể thêm div mà bạn muốn chụp vào một hình ảnh bằng cách viết:

<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>Code language: HTML, XML (xml)

Sau đó, để chọn và nắm bắt phần tử, mình có thể viết:

const getScreenshotOfElement = async (element) => {
  const canvas = await html2canvas(element)
  document.body.appendChild(canvas)
}
const div = document.querySelector('div')
getScreenshotOfElement(div)Code language: JavaScript (javascript)

Tôi có chức năng getScreenOfElement đưa những element gì tôi muốn chụp thành hình ảnh và đưa vào canvas.

Trong hàm, tôi chỉ gọi hàm html2canvas với element.

Hàm này trả về một lời hứa phân giải thành phần tử canvas với phần tử được element chuyển đổi thành hình ảnh trong canvas.

Sau đó, tôi gọi document.body.appendChild với canvas để nối nó vào cơ thể.

Tiếp theo, mình chọn div với querySelector.

Và sau đó tôi gọi hàm getScreenOfElement mà mình vừa tạo.

Bây giờ bạn sẽ thấy canvas với hình ảnh div của mình được hiển thị bên dưới div thực.

Kết luận

Bạn có thể sử dụng thư viện html2canvas để chụp một phần tử thành hình ảnh bên trong một phần tử canvas.

Điều này cho phép bạn chụp ảnh màn hình của một phần tử một cách dễ dàng.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về CSS tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG