html2canvas保存图片、qrcode添加二维码

 js代码

 <!--引入canvas  -->
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <!-- qrcode.js -->
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    <!-- jquery -->
    <script type="text/javascript" src="http://hti.cbcie.com/js/jquery-1.7.2.js"></script>
<script type="text/javascript"> 
        
    //下载离职表
    function saveimg() {
        var date = new Date();
        const canvasID = document.getElementById("tablecontent");
        //选中.box类将该容器转为canvas
        html2canvas(canvasID, {
            scale: 16,
            dpi:4000,
        }).then(function (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();

            //document.body.appendChild(canvas);    //像页面中添加转为canvas之后的元素
        })
    }
    // 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 });
    }
    //初始化二维码
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 100,
        height: 100
    });
    //生成二维码的方法
    function makeCode() {
        var elText = document.getElementById("pageurl");
        if (!elText.value) {
            alert("请输入一个地址！");
            elText.focus();
            return;
        }
        qrcode.makeCode(elText.value);
    }
   
</script>

页面内容

<div id="tablecontent">
            <div class="lzzmcss">
                	<%-- 二维码展示地址 --%>	
                    <div id="qrcode" style="width: 100px; height: 100px; margin-top: -55px; float: left">
                    </div>
                     
 
                </div>
 
            </div>
        </div> 
        <div style="float: right"  >
            <input id="pageurl"  type="text"   style="width: 200px;"></input><br />
            <button type="button"  class="btnOrangeSmall" onclick="makeCode();">点击生成二维码</button>
            <button type="button" class="btnOrangeSmall" onclick="saveimg()">保存为图片</button>
        </div> 
		<%--也可使用此方法下载页面内容  --%>
 	<div id="dy" ><button style="" type="button" onclick="$('#dy').hide(); window.print();">打印</button></div>