截图保存或者html内容保存图片-繁华依旧的技术专栏-CYBLOG

把html内容或者某个div的内容保存图片类似与截图
<!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 type='text/javascript' src='https://cyimt.net/html2canvas.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: 30vh;
                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>