เราจำเป็นต้องจับภาพ (แปลงเป็นภาพ) ส่วนหนึ่งของมาร์กอัปของเราที่วางเค้าโครงเว็บไซต์ของเราและบันทึกภาพที่ถ่ายนั้นหรือทำอะไรกับมัน ดังนั้น เราจึงต้องคิดหาวิธีที่จะทำให้พฤติกรรมดังกล่าวสำเร็จได้
เนื่องจากปัญหาของเรารวมถึงการจับภาพองค์ประกอบมาร์กอัปและไม่ใช่แค่ผ้าใบ มันค่อนข้างซับซ้อนและโดยเฉพาะอย่างยิ่งถ้าเราวางแผนที่จะทำมันตั้งแต่เริ่มต้น ดังนั้น เพื่อความสะดวกของเรา เราจะใช้ไลบรารีของบุคคลที่สาม htmltocanvas ที่ทำตามชื่อจริงๆ โดยแปลงมาร์กอัปที่ต้องการเป็นแคนวาส หลังจากนั้นเราสามารถดาวน์โหลดองค์ประกอบแคนวาสเป็นรูปภาพได้
ตัวอย่าง
รหัสสำหรับการทำเช่นนั้นจะเป็น -
<!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> ผลลัพธ์
และผลลัพธ์ของรหัสต่อไปนี้จะเป็น −
หลังจากคลิกปุ่มดาวน์โหลด
โปรดทราบว่ารูปภาพที่สองมีผ้าใบอยู่ติดกับปุ่ม "ดาวน์โหลด" ซึ่งเราสามารถคลิกขวาและบันทึกลงในที่จัดเก็บในเครื่องของเราได้
