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 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/
