引入“html2canvas.js”,是这个版本:
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
引入其他版本就变得很复杂
代码:
function htmlToimg(ele) {
html2canvas(ele, {
// 页面高度
height: ele.outerHeight(),
// 页面宽度
width: ele.outerWidth(),
onrendered: function(canvas) {
// 生成图片的地址
ele.find("#down1").attr('src',canvas.toDataURL());
// 图片名字
ele.find("#down1").attr('poster.png') ;
}
});
}
传入需要转成图片的页面元素即可。jq和js对象都可。
需要注意:
1:若有页面有持续性动画,应该给‘#down1’图片设置透明度,这样既保证微信中长按可保存,也不损失页面中的持续动态效果。
2:若页面显示时有加载动画,应该等该页面所有元素加载完成后再调用,否则图片不全。
为什么要偏偏要引入这个版本的包?因为这个版本的包可以这样简单使用,我也没有发现有截图质量、尺寸等糟心的问题,换了其他版本的包就各种问题,该方法也不能正常使用。效率至上,该研究的总要去研究,但效率更重要。