搜索

div 内容生成图片并下载


发布时间: 2022-11-24 17:57:07    浏览次数:11 次
<!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/ 

 

免责声明 div 内容生成图片并下载,资源类别:文本, 浏览次数:11 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 05:57:07。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/j-a-h/p/16814413.html