前端代码生成博客封面图片

背景

最近在学习前端css样式，flex布局。可以实现各种图形。之前每次发博客都为找不到合适的图片而苦恼。刚好前端画好页面后，引入html2canvas的js库，可以直接下载图片，很好地满足了我的需求。现在分享一下学习成果，希望对你也有帮助。

案例一

1、效果

2、代码

    
    
    html画文章封面图
    
    
        #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;
        }
    



    

    

    

    

    

    

    


生成图片

    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}`;
    }

案例二

1、效果

2、代码

    
    
    html画文章封面图
    
    
        #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;
        }
    



    
这是html画的封面图
    
———创作于2025-05-05

生成图片

    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}`;
    }