码迷,mamicode.com
首页 > Web开发 > 详细

html2canvas.js插件截图空白问题

时间:2020-05-28 19:25:20      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:模糊   height   dialog   scrolltop   cli   标签   class   弹窗   element   

发现使用

html2canvas.js插件截图保存在前端很方便。学习过程中预计问题。
截图出现空白和截图不全。
问题原因:
html2canvas.js插件截图是基于body标签的,如果body存在滚动条就会出现截图空白的情况。如何避免:
关键点:在截图前将滚动条位置设置在顶部。截图时,截图选择内容标签不是body,就将截图宽度和高度设置为选择标签的宽高在截图。

具体代码:
<!-- 海报弹窗 -->
	<div class="dialog flex" id="alert10" style="display:none" >
		<div class="poster_con">   
   
			<div class="poster"  id="contbox">
				<div class="qrcode" id="qrcode">
				
				</div>
			</div> 
    
			<div class="poster_btn"><button id="down">点击保存图片分享给好友</button><a id="down1" class="down" href="" download="downImg"   style="display:none"></a></div> 
</div> </div>

  

js代码:

  $("#down").click(function(){
        // 截图前先讲滚动条置顶
        $(‘html,body‘).animate({‘scrollTop‘:0});
        // document.getElementById("contbox") 需要截图的是div标签
        html2canvas(document.getElementById("contbox"),
            {logging:false,
                width:$("#contbox").width(),// 宽设置为div标签的宽
                height:$("#contbox").height(),// 高设置为div标签的高
                useCORS:true}).then(function(canvas) {
            //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
            var timestamp = Date.parse(new Date());
            //把截取到的图片替换到a标签的路径下载
            $("#down1").attr(‘href‘,canvas.toDataURL("image/png"));
            console.log(canvas.toDataURL("image/png"));
            //下载下来的图片名字
            $("#down1").attr(‘download‘,timestamp + ‘.png‘) ;
            $("#down1")[0].click();
            //document.body.appendChild(canvas);
        });

    });

  

html2canvas.js插件截图空白问题

标签:模糊   height   dialog   scrolltop   cli   标签   class   弹窗   element   

原文地址:https://www.cnblogs.com/gynbk/p/12983217.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!