Chúng tôi được yêu cầu chụp (chuyển đổi thành hình ảnh) (các) phần đánh dấu của chúng tôi để đưa ra trang web của chúng tôi và lưu hình ảnh đã chụp đó hoặc làm gì đó với nó. Vì vậy, chúng tôi bắt buộc phải nghĩ ra một cách sử dụng mà chúng tôi có thể đạt được hành vi được mô tả này.
Vì vấn đề của chúng tôi bao gồm việc thu thập bất kỳ phần tử đánh dấu nào chứ không chỉ canvas, nên nó hơi phức tạp và đặc biệt nếu chúng tôi định làm lại từ đầu. Do đó, để dễ dàng, chúng tôi sẽ sử dụng thư viện của bên thứ ba, htmltocanvas thực hiện chính xác những gì tên gợi ý, chuyển đổi đánh dấu mong muốn thành canvas, sau đó chúng tôi có thể chỉ cần tải xuống phần tử canvas dưới dạng hình ảnh.
Ví dụ
Mã để làm như vậy sẽ là -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
#capture{
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
background-color: rgb(43, 216, 216);
}
span{
flex: 1;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 20px;
}
#first{ background-color: rgb(15, 168, 15); }
#second{ background-color: rgb(43, 93, 228); }
#third{ background-color: rgb(194, 55, 13); }
</style>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
const download = () => {
html2canvas(document.querySelector('#capture')).then(canvas => {
document.body.appendChild(canvas);
});
}
</script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="download()">
Download
</button>
</body>
</html> Đầu ra
Và đầu ra của đoạn mã sau sẽ là -
SAU KHI NHẤP VÀO NÚT TẢI XUỐNG
Lưu ý rằng hình ảnh thứ hai chứa canvas bên cạnh nút “Tải xuống”, chúng ta có thể chỉ cần nhấp chuột phải và lưu vào bộ nhớ cục bộ của mình.