html2canvas.js使用过程中在ios下遇到的bug——截图不完整

最近在做一个人脸识别的项目，最终生成图，需要长按保存（保存的是一个DIV里所有的内容截成图），也可以不用html2canvas，但是让设计重新作图再上传图比较麻烦，虽然有bug，但是就是这么执着，仍然用了html2canvas.js这款插件。

之前就有听说html2canvas这个插件存有bug，但是之前用过一次且没有遇到，自从IOS出来后，且又刚刚在新项目中使用到，IOS11下遇到多个bug，话不多说，听我一一道来，然后逐个解决的方法，这篇简文只说一下截图不完整的问题！
（首先说明项目是移动端项目，只限IOS11下，若是PC端、安卓bug、IOS10/9/8，请对比参考）

首先说一下html2canvas的工作原理

Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面（整屏）截图下来。
换句话来说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像，生成base64的图片流程。
这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。

截图不完整如何碰到的

做的项目中，每一个页面的高度都是整屏的，只有其中一个页面是比较长（是需要滑动的），所以body的属性就不能使用overflow:hidden，然而在IOS11下截图不完整的重要因素就是因为body没有overflow:hidden，当然给body添加overflow:hidden后，长页面就无法滚动，为了能让长页面滚动，就控制div高度给div一个overflow-y:scroll，当然此属性无法让长页面顺畅滚动，这里让长页面可以快速顺畅滑动的插件就不多说了，说一个新属性

-webkit-overflow-scrolling：touch

这一属性完美解决了移动端不在使用插件的情况下页面滚动很慢或卡顿的问题，但是方法比较耗内存（原理自查百度），最好在产生了非常大面积的overflow时才应用。

好了，小结一下IOS11下html2canvas截图不完整的原因：
在翻页页面或跳转页面不是整屏高度的情况，且html/body缺少属性overflow:hidden;会导致html2canvas在IOS11下截图不完整。
解决方法：

html,body{overflow：hidden}

本人项目链接地址：点击打开链接
小小问题与同行们分享，前端道路深似海，与大家共奋进，谢谢！
声明：转载请注明出处！