学习使用html2canvas生成渐变色背景图片

news2025/11/4 19:05:59

学习使用html2canvas生成渐变色背景图片

- 全部代码
- html2canvas官网
- 生成图片的下载

全部代码

<!DOCTYPE html>
<html>
    
<head>
    <meta charset="utf-8">
     <title>生成渐变色背景图片</title>
</head>

<style>
    #grad1 {
        width: 750px;
        padding: 32px;
        margin: 50px auto;
        background: linear-gradient(180deg, #D24A3C 0%, #B52A61 100%);
    }


    p {
        margin: 0px;
    }

    h2 {
        color: #ffffff;
        font-size: 40px;
        line-height: 80px;
        margin: 0px;
    }


    h3 {
        color: #ffffff;
        font-size: 35px;
        line-height: 70px;
        margin: 0px;
    }


    .bill_content {
        border: 1px solid;
        border-color: #E8E5DC;
        color: #ffffff;
        font-size: 30px;
        padding-left: 32px;
        padding-right: 32px;
        line-height: 60px;
        margin: 0px;
    }

</style>

    
<script src="./js/html2canvas1.4.1.js"></script>
    
<script>
    function taskScreenshort() {
        html2canvas(document.getElementById("grad1"), {
            allowTaint: true
        }).then(canvas => {
            document.getElementById("item").setAttribute('src', canvas.toDataURL());
        })
    }
</script>
    
<body>
        
<div id="grad1">
    <div class="bill_content">
        <div style="height: 60px"></div>
        <h2>www.qipa250.com</h2>
        <p>奇葩天地网</p>

        <div style="height: 30px"></div>
    </div>
</div>

<input type="button" value="点我生成图片" onclick="taskScreenshort()"/>

<div style=" width: 750px;
        padding: 32px;
        margin: 50px auto;">
    <img id="item"/>
</div>


    
</body>
</html>