JS JQ将HTML页面转换成图片

引入“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:若页面显示时有加载动画,应该等该页面所有元素加载完成后再调用,否则图片不全。

为什么要偏偏要引入这个版本的包?因为这个版本的包可以这样简单使用,我也没有发现有截图质量、尺寸等糟心的问题,换了其他版本的包就各种问题,该方法也不能正常使用。效率至上,该研究的总要去研究,但效率更重要。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。