<!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/
标签：vh,生成,height,inner,var,div,font,下载,con From： https://www.cnblogs.com/j-a-h/p/16814413.html