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

徊忆羽菲

已于 2022-12-30 16:17:11 修改

阅读量1.7k

点赞数 1

分类专栏： Html Javascript 文章标签：学习 javascript 前端

于 2022-12-30 16:15:35 首次发布

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/128497080

版权

Html 同时被 2 个专栏收录

254 篇文章 9 订阅

订阅专栏

Javascript

235 篇文章 6 订阅

订阅专栏

学习使用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>