html2canvs图片空白,html2canvas.js插件截图空白问题

发现使用

html2canvas.js插件截图保存在前端很方便。学习过程中预计问题。

截图出现空白和截图不全。

问题原因：

html2canvas.js插件截图是基于body标签的，如果body存在滚动条就会出现截图空白的情况。如何避免：

关键点：在截图前将滚动条位置设置在顶部。截图时，截图选择内容标签不是body，就将截图宽度和高度设置为选择标签的宽高在截图。

具体代码：

点击保存图片分享给好友

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);

});

});