<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./jquery-3.2.1.js"></script>
        <script src="../html2canvas.min.js"></script>

        <style>
            *{
                padding: 0;
                margin: 0;
            }
            html, body{
                width: 100%;
                height: 100%;
            }
            .btn-down{
                position: fixed;
                top: 0;
                left: 0;
                width: 15.2083vw;
                height:5.5185vh;
                font-size: 40px;
                border-radius: 0.9259vh;
                color: #fff;
                text-align: center;
                cursor: pointer; 
                font-size: 5.3704vh;

            }
            .container{
                width: 100%;
                height: 100%;
                background: lightblue;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .container-inner{
                width: 80.7292vw;
                height: 100vh;
                background: pink;

            }
            .bookbox-inner-con {
                position: absolute;
                top: 42.3148vh;
                left: 23.75vw;
                right: 23.75vw;
                bottom: 31.0185vh;
                color: #B99858;
                font-weight: bold;
                font-family: Source Han Sans CN;
            }

            .bookbox-inner-con .inner-con-txt {
                font-size: 3.7037vh;
                text-align: center;
                padding: 0 2.5vw;
            }
            .bookbox-inner-con .inner-con-ks {
                margin-top:7.3704vh;
                margin-bottom: 1.5741vh;
                text-align: right;
                font-size: 2.8704vh;
            
            }
            .bookbox-inner-con .inner-con-time{
                text-align: right;
                font-size: 2.8704vh;
            
            }
        
      </style>
    </head>
    <body>
        <div class="btn-down" onclick="saveCertificateBook()">下载</div>
        <div class="container">
            <div class="container-inner" id="farmImage">
                <div class="bookbox-inner-con">
                    <div class="inner-con-txt">恭喜您在本次测试中获得“优秀”特此颁发证书以示鼓励</div>
                    <div class="inner-con-ks">《测试》</div>
                    <div class="inner-con-time">2022 年 10月 10日</div>
                </div>
            </div>
        </div>



        <script>
            function saveCertificateBook(){
                var date = new Date();
                        const canvasID = document.getElementById("farmImage");
                        const  rect=document.getElementById("farmImage").getBoundingClientRect()
                         // 生成图片并上传到数据库保存
                         html2canvas(canvasID, {
                           scale: 0.5, // 数值越大生成的图片越清晰
                           useCORS: true,
                           allowTaint: true,
                           y: 0, // 滚动条高度修复
                           x: 0,
                           allowTaint: true, //开启跨域
                           useCORS: true,
                           scrollX: 0,
                           scrollY: rect.top, // 关键代码
                           height: rect.height, // 加高度，避免截取不全
                         }).then((canvas) => {
                                    let dataURL = canvas.toDataURL("image/jpeg"); // 拿到数据流     
                                    var aLink = document.createElement("a"); // 创建一个a标签
                                    var blob = base64ToBlob(dataURL);
                                    var event = document.createEvent("HTMLEvents");
                                    event.initEvent("click", true, true);
                                    aLink.download = '证书' + date.getTime() + "." + blob.type.split("/")[1]; // 使用时间戳给文件命名
                                    aLink.href = URL.createObjectURL(blob);
                                    console.log(aLink.href )
                                    aLink.click();
                           })
            }

             // base64转Blob对象
             function   base64ToBlob(code) {
                        var parts = code.split(";base64,");
                        var contentType = parts[0].split(":")[1];
                        var raw = window.atob(parts[1]);
                        var rawLength = raw.length;
                        var uint8Array = new Uint8Array(rawLength);
                        for (var i = 0; i < rawLength; i++) {
                            uint8Array[i] = raw.charCodeAt(i);
                        }
                        return new Blob([uint8Array], {type: contentType});
                    }



        </script>
    </body>
</html>

页面效果：

 

点击下载 下载的图片：

 

html2canvas 下载地址：

http://html2canvas.hertzen.com/ 

 

原文地址：http://www.cnblogs.com/j-a-h/p/16814413.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性