tab切换导致html2canvas截图不全
1、[插件官网 http：//html2canvas.hertzen.com/ 隐藏之后发现在绘制的过程中出现了半截的情况，在官网QA中看到了相关的资料：再次看配置项中，看到了 然后将其设置为0，再次渲染就是正常的了。
2、试一下这个样式：word-break： break-all；强制换行的。
3、点击切换tab页面时第二个页面显示不正常，各种搜索之后得到解决办法： 需要将第二个图表resize操作，因为第二个图表中style=“display：none的”，默认是没有宽度和高度的 ，下面先展示处理前的图表和处理后的图表。
4、最近H5项目有个功能需求：长按微信网页保存为截图。本人使用了html2canvas.js实现，感觉效果还不错，有几个注意点和大家分享一下。
html2canvas截图生成图片内容不全如何解决?
于是采用解决方案2，修复了此问题。在点击保存图片时，此时要保存的资源较多，造成模块并没有完全加载完毕，就已经生成了截图。
滚动了滚动条而造成的。解决方法如下。获取滚动条的位置，body固定定位，top值为负当前滚动条的位置。设置延时100毫秒后再获取要生成海报的元素，当生成海报之后，再把滚动条设置回原来的位置。
试一下这个样式：word-break： break-all；强制换行的。
[插件官网 http：//html2canvas.hertzen.com/ 隐藏之后发现在绘制的过程中出现了半截的情况，在官网QA中看到了相关的资料：再次看配置项中，看到了 然后将其设置为0，再次渲染就是正常的了。
百度、谷歌了n久，基本啥方法都试了一遍，还是一直截取空白 主要固原是因为页面有滚动条，然后把滚动条去掉就没有问题。文档使用方法 按照这个方式使用，页面没有滚动条还行，有滚动条时出现大片空白。
html2canvas截图的清晰度问题
我们知道设备的 devicePixelRatio决定了canvas的清晰度 ， 文中解决这个问题的核心方法是放大canvas然后缩小显示到原比例。于是我在html2canvas.js中做了如下改动：我只是将待画元素的宽度与高度都乘以2。
因为html2canvas只是个JS的脚本，它不能像软件一样模拟翻页，所以只能载取第一屏。第一屏的高度取决于你电脑屏幕的分辨率。
关于清晰度问题：在Android手机上，生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度，在html2canvas之中存在一个参数scale，这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。
图片跨域不支持。生成的图片存在跨域限制问题。绘制清晰度低。即使使用api scale放大后绘制，又会由于生成base64格式图片内容过长导致无法传输。圆弧计算精度低。
效果图如下：模糊在线demo 解决方案： 首先一样，获取 Canvas 对象： 获取像素比，将 Canvas 宽高进行放大，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio ， 我们写了一个兼容的方法。
不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。
手机为什么截屏总是模糊的呢?
1、调整手机分辨率如果手机分辨率过低，截图的清晰度会受到影响，因此我们可以尝试调整手机分辨率来提高截图清晰度。具体方法如下：进入手机设置，找到“显示”或“屏幕”选项。在“分辨率”选项中选择更高的分辨率。
2、截屏的图片会与屏幕分辨率会保持一致，如果屏幕分辨率较低，那么截屏之后放大查看可能会比较模糊；若图片经过软件传输，图片分辨率和大小会被压缩，也会导致截图模糊，建议发送截图时尽量选择原图。
3、可能是手机卡住了，截屏又太快，导致没有加载完就截图了，最好是打开画面后，等待几秒，然后再截图。
4、图片本身质量较差：如果您在截屏时使用了低分辨率或质量较差的截屏设置，那么生成的截屏图片本身可能就比较模糊或失真。存储空间不足：如果您的手机存储空间已经不足，可能会导致图片在存储或处理时出现问题，从而导致模糊或失真。
5、当您截屏微信图片时，可能会出现图像模糊不清的情况。这通常是由于微信压缩图片导致的。您可以尝试以下方法来解决这个问题：重新截屏：您可以重新截取微信图片，确保在截取之前将其放大到屏幕上。
6、手机截屏的图片与屏幕分辨率会保持一致。如果您的手机屏幕分辨率较低，那截屏之后放大查看可能会比较模糊。若图片经过软件传输，图片分辨率和大小会被压缩，也会导致截图模糊，建议您在上传或发送截图时尽量选择原图传送。
使用html2canvas导出pdf截图不全问题解决方案——经测可用
解决方法如下。获取滚动条的位置，body固定定位，top值为负当前滚动条的位置。设置延时100毫秒后再获取要生成海报的元素，当生成海报之后，再把滚动条设置回原来的位置。然后我的截图再没有出现顶部白屏问题。
如果在多个页面使用，给函数定义一个参数，参数为要导出页面部分的id。将 #pdfDom 替换为参数即可 将导出文件的名称也作为参数传入函数 此种方式也可用于vue，尝试后可行，需要调节部分参数，但毕竟不太合适。
试一下这个样式：word-break： break-all；强制换行的。
最近H5项目有个功能需求：长按微信网页保存为截图。本人使用了html2canvas.js实现，感觉效果还不错，有几个注意点和大家分享一下。
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
