一、想法
據說，把“喜悅”兩個字掛在家里顯眼的地方，時常看到，就能心情愉悅。剛好最近在學習前端flex布局，用代碼實現，導出圖片，打印出來，帖在家里，非常nice。現在分享給大家。
二、效果
導出豎版的圖片：
導出橫版的圖片：
三、代碼
豎版的代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html畫文章封面圖</title><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><style lang="scss" scoped>@font-face {font-family: 'ResourceHanRoundedCN-Bold';src: url(./fonts/簡-圓體/資源圓體/ResourceHanRoundedCN-Bold.ttf);font-weight: normal;font-style: normal;}#box {width: 420px;height: 594px;display: flex;align-items: center;flex-direction: column;font-weight: bold;font-family: ResourceHanRoundedCN-Bold;color: gold;font-size: 180px;background-color: red;}.xx{height: 297px;line-height: normal;display: flex;align-items: flex-end;justify-content: center;}.dd{height: 297px;line-height: normal;display: flex;align-items: flex-start;justify-content: center;margin-top: -50px;}.btn{margin-top: 10px;margin-left: 10px;}</style>
</head>
<body>
<div id="box"><div class="xx">喜</div><div class="dd">悅</div>
</div>
<button class="btn" onclick="capture()">生成圖片</button>
<script>function capture() {html2canvas(document.getElementById('box'), {useCORS: true,allowTaint: false,scale: 1}).then(canvas => {var link = document.createElement('a');link.href = canvas.toDataURL("image/png");const now = new Date();link.download = formatDateTime(now)+'.png';link.click();});}function formatDateTime(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');const hours = String(date.getHours()).padStart(2, '0');const minutes = String(date.getMinutes()).padStart(2, '0');const seconds = String(date.getSeconds()).padStart(2, '0');return `${year}${month}${day}${hours}${minutes}${seconds}`;}
</script>
</body>
</html>
橫版的代碼：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html畫文章封面圖</title><script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script><style lang="scss" scoped>@font-face {font-family: 'ResourceHanRoundedCN-Bold';src: url(./fonts/簡-圓體/資源圓體/ResourceHanRoundedCN-Bold.ttf);font-weight: normal;font-style: normal;}#box {height: 420px;width: 594px;line-height: 400px;border: 1px solid gray;display: flex;align-items: center;flex-direction: column;font-weight: bold;font-family: ResourceHanRoundedCN-Bold;color: gold;font-size: 200px;background-color: red;}.btn{margin-top: 10px;margin-left: 10px;}</style>
</head>
<body>
<div id="box" >喜悅
</div>
<button class="btn" onclick="capture()">生成圖片</button>
<script>function capture() {// 設置背景圖像html2canvas(document.getElementById('box'), {useCORS: true,allowTaint: false,scale: 1}).then(canvas => {var link = document.createElement('a');link.href = canvas.toDataURL("image/png");const now = new Date();link.download = formatDateTime(now)+'.png';link.click();});}function formatDateTime(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0');const hours = String(date.getHours()).padStart(2, '0');const minutes = String(date.getMinutes()).padStart(2, '0');const seconds = String(date.getSeconds()).padStart(2, '0');return `${year}${month}${day}${hours}${minutes}${seconds}`;}
</script>
</body>
</html>
四、友情鏈接
最近在學習前端畫圖，可以制作生日祝福賀卡、節日祝福卡片、對聯、字帖、字畫等。如果您需要，或者感興趣，歡迎一起交流！
