Cách chuyển đổi HTML thành hình ảnh trong JavaScript
Nếu bạn muốn chụp ảnh màn hình của một phần hoặc toàn bộ trang web của mình bằng JavaScript, bạn có thể thấy mình bị mắc kẹt. Tạo một hình ảnh từ một phần tử HTML có vẻ như là một thách thức, vì không có cách nào trực tiếp để làm điều đó trong JavaScript.
Rất may, đây không phải là một nhiệm vụ bất khả thi và trên thực tế, khá dễ dàng với các công cụ thích hợp. Sử dụng thư viện html-to-image, việc tạo hình ảnh của các nút DOM đơn giản như một lệnh gọi hàm duy nhất.
Mục Lục
Html-to-image hoạt động như thế nào?
Thư viện html-to-image tạo ra một hình ảnh ở dạng URL dữ liệu base64. Nó hỗ trợ một số định dạng đầu ra, bao gồm PNG, JPG và SVG. Để thực hiện chuyển đổi này, thư viện sử dụng thuật toán này:
- Tạo một bản sao của phần tử HTML đích, phần tử con của nó và bất kỳ phần tử giả nào được đính kèm.
- Sao chép kiểu cho tất cả các phần tử được sao chép và nhúng kiểu nội dòng.
- Nhúng các phông chữ web có liên quan, nếu có.
- Nhúng bất kỳ hình ảnh nào hiện có.
- Chuyển đổi nút nhân bản thành XML, sau đó là SVG.
- Sử dụng SVG để tạo URL dữ liệu.
Cảnh báo và hạn chế
Mặc dù html-to-image là một thư viện tuyệt vời, nhưng nó không hoàn hảo. Nó có một số lưu ý, cụ thể là:
- Thư viện sẽ không hoạt động trong Internet Explorer hoặc Safari.
- Nếu HTML mà bạn cố gắng chuyển đổi bao gồm một phần tử canvas bị nhiễm bẩn, thì thư viện sẽ không thành công. Như MDN giải thích, việc bao gồm dữ liệu không được CORS phê duyệt trong phần tử canvas của bạn sẽ làm hỏng nó.
- Bởi vì các trình duyệt đặt giới hạn về kích thước tối đa của một URL dữ liệu, nên có những giới hạn về kích thước của HTML mà thư viện có thể chuyển đổi.
Sử dụng Thư viện
Để dùng thử thư viện, điều đầu tiên bạn cần làm là tạo một thư mục dự án trên máy cục bộ của bạn. Tiếp theo, cài đặt html-to-image trong thư mục đó bằng trình quản lý gói npm. Đây là lệnh đầu cuối để cài đặt nó:
npm install Bạn cũng nên cài đặt trình gói JavaScript để sử dụng thư viện dễ dàng hơn một chút. Gói esbuild có thể giúp đóng gói các mô-đun nút thành các tập lệnh tương thích với web.
npm install esbuildĐó là tất cả những gì bạn cần cài đặt. Tiếp theo, tạo một tệp có tên index.html trong thư mục của bạn và cung cấp nó với một máy chủ web mà bạn chọn. Đặt mã sau vào index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.colorful-div {
padding: 3rem;
color: white;
background-image: linear-gradient(to right, yellow, rebeccapurple);
border: 1px solid black;
margin: 1rem auto;
font-size: 3rem;
font-family: cursive;
}
</style>
</head>
<body>
<div class="colorful-div">
I'm going to be in a screenshot!
</div>
<div class="long-text">
I'm an example of a sufficiently verbose paragraph that
illustrates that taking screenshots in JavaScript is
really very easy, for the following reasons:
<ul>
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 2</li>
</ul>
</div><script src="out.js"></script>
</body>
</html>
Mã này tạo hai phần tử trên trang: một div có nền gradient, một số văn bản và danh sách không có thứ tự bên trong một div khác. Tiếp theo, bạn sẽ viết JavaScript để chuyển đổi các phần tử này thành hình ảnh. Đặt mã sau vào một tệp mới có tên script.js:
import * as htmlToImage from "html-to-image";const elems = ['.colorful-div', '.long-text']
elems.forEach((elem, ind) => {
const node = document.querySelector(elem)
htmlToImage.toPng(node)
.then(function (dataUrl) {
let img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!');
console.log(error)
});
})
Mã này thực hiện một số điều:
- Nhập thư viện html-to-image.
- Tạo một mảng gồm các bộ chọn CSS nhắm mục tiêu đến hai phần tử.
- Tạo hình ảnh PNG dưới dạng URL dữ liệu từ mỗi phần tử của mảng.
- Tạo thẻ img và đặt thuộc tính src của nó thành URL dữ liệu, tạo bản sao hình ảnh của hai phần tử.
Bây giờ, hãy sử dụng esbuild để tạo tệp gói (out.js) tham chiếu index.html đó bằng cách chạy như sau trong thiết bị đầu cuối của bạn:
./node_modules/.bin/esbuild script.js
Tại thời điểm này, đây là giao diện index.html trong trình duyệt của bạn:
Mặc dù các bản sao trông giống hệt như bản gốc, chúng thực sự là các yếu tố hình ảnh. Bạn có thể xác nhận điều này bằng cách mở các công cụ dành cho nhà phát triển của mình và kiểm tra chúng.
Thư viện này cũng hoạt động với các khung JavaScript. Tài liệu html-to-image chứa các hướng dẫn về cách tạo các định dạng hình ảnh khác. Nó cũng bao gồm một ví dụ cho thấy cách sử dụng thư viện với React.
Chụp ảnh màn hình với JavaScript thật dễ dàng
Không có phương pháp JavaScript gốc nào để tạo hình ảnh từ các phần tử HTML hoặc chụp ảnh màn hình của DOM. Tuy nhiên, với sự trợ giúp của các thư viện và dịch vụ như html-to-image, nó trở thành một nhiệm vụ dễ dàng.
Có nhiều cách khác để đạt được kết quả tương tự, chẳng hạn như thư viện hình ảnh wkhtml. Bạn có thể sử dụng công cụ mã nguồn mở này để chụp ảnh màn hình của một trang web hoàn chỉnh.