前言

采用html2canvas做长截图，截图内容上面部分显示完好，底部大片内容空白，但是图片的高度是正确的。。。

正文

思路1：图片没有渲染就开始截图了，于是我加延时操作，问题依然存在。代码如下：

setTimeout((cb) => {const domObj = this.$refs.cont;html2Canvas(domObj,).then((canvas) => {          var pageData = canvas.toDataURL("image/png");});
}, 13000);

思路2 ：内容过多，截不下来。嘿一查还真是!我用的chrome浏览器

这不巧了吗，然而不可能删减内容啊，只能牺牲下清晰度，调整下分辨率，刚好人家提供了配置，html2canvas完整配置摸我：chrome浏览器默认缩放比率为2，那把它适当调小点，问题解决

devicePixelRatio的解释摸我

代码如下：

html2Canvas(domObj,{scale: 1
}).then((canvas) => {var pageData = canvas.toDataURL("image/png");
});

总结

关于html2canvas插件截图的问题种类很多，网上都有很多资料，具体还看自己的问题

html2canvas长截图不全，底部内容空白相关推荐

html2canvas.min.js 截图多行文字错位；截图不全不完整
在帮助组员解决问题中记录使用过程中遇到的问题: 1. iOS 系统上截图生成的海报文字分享出去之后文字会错位这个是html2canvas 对中文支持的问题 html 文件: <div i ...
怎么截取网页全图_FastStone Capture长截图怎么使用？滚动截图教程
FastStone Capture长截图怎么使用?滚动截图教程.FastStone Capture是一款非常受大众们喜爱一款截图软件,具备着自定义截图.滚动窗口截图等多种截图功能,而且操作简便,容易上 ...
解决html2canvas截图不全问题
最近公司要求做一个生成海报,html2canvas是个不错的选择,随之而来的问题,当页面的滚动条不在顶部的时候出现,截图不全,顶部出现白屏问题,我当时是各种百度各种搜索问题还是没有得到解决. 我知道的 ...
android底部弹出显示不全,Android 解决 NestedScrollView 底部内容被遮挡显示不全
Android 解决 NestedScrollView 底部内容被遮挡显示不全很早之前就遇到过在使用 NestedScrollView 的时候发现底部的 View 总是显示不全, 看起来像是被底部的 ...
计算机word文档无法预览,电脑打开Word文档内容显示不全或显示空白怎么解决
很多用户会在电脑中使用必装的Microsoft Office系列软件.有用户在电脑中打开Word文档,发现内容显示不全,有时候显示空白,那么应该怎么解决这一问题?对此,大家可以参考本教程提供的方法. ...
计算机word显示不全,win7系统电脑打开Word文档内容显示不全或显示空白的解决方法...
很多小伙伴都遇到过win7系统电脑打开Word文档内容显示不全或显示空白的困惑吧,一些朋友看过网上零散的win7系统电脑打开Word文档内容显示不全或显示空白的处理方法,并没有完完全全明白win7系统 ...
最近朋友民间借贷起诉，聊天记录内容过多，聊天长截图需要处理成A4纸上，方便打印
最近我朋友遇到麻烦事,别人借钱不还,只能起诉至法院,法院认为证据不足,没有转账记录,只有聊天记录,六个月的聊天记录,需要截图打印出来,这个工作量,就光找打印店估计没几千解决不了,没办法谁让我是搞开发的 ...
小程序跳转H5实现长截图功能；vue-cli3通过rem适配
一.需求: 微信小程序部分页面需要一键长图的功能. 通过html2canvas插件可以实现,具体可参考微信小程序实现一键长图并保存图片到相册.由于该插件只能在H5项目中使用,则需要截图的小程序 ...
使用Chrome来做一张长截图
遇见一篇有意思的文章,或者是在购物时发现了好东西,需要分享. 不想发送链接,也许搞一个长截图是个很好的选择. Selenium Selenium是一种自动化测试工具,它支持各种浏览器,包括 Chrom ...

html2canvas长截图不全，底部内容空白

前言

正文

总结

html2canvas长截图不全，底部内容空白相关推荐

最新文章

热门文章