解决html2canvas截图不完整的问题(替换二维码生成新的图
2020-12-30 本文已影响0人
易冷zzz
背景：通过html2canvas插件使用最新的二维码替换宣传页上的原有的二维码并下载该图片，并解决图片下载不完整的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
position: relative;
display: inline-block;
}
/*设置img1尺寸为原图尺寸或者等比缩放尺寸*/
.img1{
width: 1080px;
height: 1920px;
}
/*设置img2尺寸和img1的二维码尺寸一直并定位覆盖到二维码上面*/
.img2{
width: 460px;
height: 460px;
position: absolute;
left: 294px;
top: 1060px;
z-index: 2;
}
</style>
</head>
<body>
<div class="container" id="container">
<img class="img1" src="./lib/download.jpg" alt="" />
<img class="img2" src="./lib/qrcode.png" alt="" />
</div>
<p>
<button type="button" id="button" class="btn">点击</button>
</p>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
/*let btn = document.getElementById("button")
btn.onclick = function () {
//设置滚动为0避免截图不完整
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
new html2canvas(document.querySelector('#container'), {
backgroundColor: 'white',
useCORS: true, //支持图片跨域
scale: 1, //设置放大的倍数
height: document.getElementById('container').scrollHeight,
windowHeight: document.getElementById('container').scrollHeight
}).then(canvas => {
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'title';
a.click();
})
}*/
$("#button").on("click", function(){
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
new html2canvas($('#container')[0], {
height: $('#container')[0].scrollHeight,
windowHeight: $('#container')[0].scrollHeight,
scale: 1,
useCORS: true,
}).then(canvas => {
let a = document.createElement('a')
a.href=canvas.toDataURL('image/png')
a.download = 'zqf'
a.click()
})
})
</script>
</body>
</html>
