当前位置：首页 > news >正文

自制喜悦字贴

news 2025/7/6 7:52:45

一、想法

据说，把“喜悦”两个字挂在家里显眼的地方，时常看到，就能心情愉悦。刚好最近在学习前端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>