发现使用
html2canvas.js插件截图保存在前端很方便。学习过程中遇到的问题，主要负责将html标签转化为图片。
canvas2image.js是一个展示图片的canvas插件，解决微信分享失败就靠这个插件。
截图出现空白和截图不全。
问题原因：
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,
$("#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);
});
});
微信分享长按图片分享js代码：
$("#down").click(function(){
// 截图前先讲滚动条置顶
$('html,body').animate({'scrollTop':0});
$('body').css({'overflow':'hidden'})
// document.getElementById("contbox") 需要截图的是div标签
html2canvas(document.getElementById("contbox"),
{logging:false,
$("#contbox").width(),// 宽设置为div标签的宽
height:$("#contbox").height(),// 高设置为div标签的高
useCORS:true}).then(function(canvas) {
// 将canvas转为图片
var img = Canvas2Image.convertToImage(canvas,$("#contbox").width()*2,
$("#contbox").height()*2);
// 图片添加到页面中，在微信里长按添加的img图片就可以正常使用微信自带的长按图片分享功能
$('body').append(img);
$('body').css({'overflow':'scroll'})
});
});