Share Sử dụng thư viện html2canvas để chụp ảnh website

filiallion · 05/22/2019

Thư viện html2canvas được dùng để chụp ảnh một trang web hoặc một thành phần nào đó trên website. Nếu các bạn muốn xây dựng một chức năng chụp ảnh mà thư viện html2canvas cung cấp thì các bạn có thể sử dụng nó. Thư viện html2canvas chụp ảnh trang hoặc thành phần website dựa trên DOM nên có thể hình ảnh được chụp không giống hoàn toàn so với những gì các bạn nhìn thấy. Ngoài ra, html2canvas là một thư viện JavaScript nên nó hoàn toàn phụ thuộc vào trình duyệt web.

Thư viện html2canvas sử dụng Promise nên các bạn cũng cần phải lưu ý về vấn đề này để đảm bảo chức năng các bạn tạo ra có thể chạy được trên các trình duyệt web mà các bạn mong muốn. Hiện tại, thư viện có thể hoạt động tốt trên trình duyệt Firefox, Chrome, IE 9+, Safari và Opera.

Để sử dụng thư viện html2canvas, các bạn truy cập địa chỉ https://html2canvas.hertzen.com để tải về và tích hợp vào website với dòng mã lệnh HTML như sau:

HTML:

<script src="path/to/html2canvas.min.js"></script>

Nếu các bạn sử dụng React hay Nodejs thì các bạn có thể cài đặt thư viện html2canvas với dòng lệnh NPM sau:

Code:

npm install html2canvas

Sau đây là một ví dụ đơn giản về cách sử dụng thư viện html2canvas để chụp ảnh một thành phần trên website. Đầu tiên, các bạn tạo thành phần trên website với nội dung mã lệnh HTML như sau:

HTML:

<div id="html2canvas-capture" style="padding: 10px; background: #0062af;">
    <h1 style="color: #fff;">Welcome to Gextend</h1>
</div>

Bây giờ, các bạn chụp ảnh thành phần trên với cài đặt JavaScript như sau:

JavaScript:

html2canvas(document.querySelector('#html2canvas-capture')).then(canvas => {
    document.body.appendChild(canvas);
});

Các bạn có thể tìm hiểu thêm về thư viện html2canvas tại địa chỉ https://html2canvas.hertzen.com/documentation.

Share Sử dụng thư viện html2canvas để chụp ảnh website

filiallion

Administrator