前端代码生成博客封面图片
背景
最近在学习前端css样式，flex布局。可以实现各种图形。之前每次发博客都为找不到合适的图片而苦恼。刚好前端画好页面后，引入html2canvas的js库，可以直接下载图片，很好地满足了我的需求。现在分享一下学习成果，希望对你也有帮助。
案例一
1、效果
2、代码
<!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>#box {display: flex;justify-content: space-between;flex-wrap: wrap;width: 700px;height: 410px;border: 1px solid gray;row-gap: 10px;}.div1 {width: 0px;height: 0px;border-top: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 100px solid green;}.div2 {width: 0px;height: 0px;border: 100px solid;border-color: transparent transparent blue transparent;}.div3 {width: 200px;height: 200px;background: linear-gradient(45deg, deeppink, yellowgreen);}.div4 {width: 200px;height: 200px;background: linear-gradient(45deg, deeppink, yellowgreen 50%, yellowgreen 50%, deeppink 100%);}.div5 {width: 200px;height: 200px;border-radius: 50%;background-color: pink;}.div6 {width: 100px;height: 200px;border-radius: 100px 0px 0px 100px;background: red;}.div7 {margin-top: 50px;width: 100px;height: 50px;border-radius: 0px 0px 50px 50px;border-bottom: 10px solid #111111;box-sizing: border-box;border-top: none;}.btn{margin-top: 10px;margin-left: 10px;}</style>
</head>
<body>
<div id="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div><div class="div6"></div><div class="div7"></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'); // 注意：月份是从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>案例二
1、效果
2、代码
<!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>#box {height: 410px;width: 700px;border: 1px solid gray;display: flex;flex-direction: column;background-color: #3B7ABF;font-weight: bold;}.div1 {height: 350px;line-height: 350px;font-size: 50px;color: white;;justify-content: center;text-align: center;}.div2 {height: 60px;line-height: 60px;font-size: 20px;color:#BF9C0E;justify-content: center;text-align: right;margin-right: 20px;}.btn{margin-top: 10px;margin-left: 10px;}</style>
</head>
<body>
<div id="box"><div class="div1">这是html画的封面图</div><div class="div2">———创作于2025-05-05</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'); // 注意：月份是从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>