成功截图
空⽩截图
通过对⽐，能够发现成功截图的⽇志中相⽐于空⽩截图的⽇志多出了⼏条⽇志，此时猜想是是否是html2canvas在iOS8系统上没有办法成功解析出dom，导致⽆法将dom⾥⾯的数据绘制到canvas中。抱着这个猜想，我直接去看html2canvas的源码，直接搜索关键字Starting node parsing 定位到了node分析的地⽅，在html2canvas中有⼀个NodeParser.js的⽂件，顾名思义，主要是⽤于node的解析的，直接看到 parseNodeTree函数，发现⾥⾯有很多条件判断，但是直接看代码并不好发现到底哪⼀个条件判断出现问题，导致解析出错。所以，决定直接调试代码，在parseNodeTree中打上断点，⼀步⼀步调试，看到底是哪⼀个条件判断出现了问题。最终，终于到了出现问题的判断 ，即下图中被红⾊圆圈标出的判断，container.isVisible，这个判断返回了false，导致了直接跳出，不继续执⾏下⾯的node解析。
那么，container.isVisible究竟是什么判断呢，查看源码得知，
可以看到isVisible是对node的style中的display和opacity 和 visibility 进⾏判断。通过调整成功截图(iOS10)和空⽩截图(iOS8)，最终发现，这2者唯⼀的不同就是this.style.display这个值，在成功截图(iOS10)的调试中，this.style.display的值为 128 ，⽽在空⽩截图(iOS8)调试
中，this.style.display的值为1，⽽contains(this.style.display,DISPLAY.NONE)的作⽤对传⼊的2个值做位与操作，⽽DISPLAY.NONE所代表的数字就是1，contains(this.style.display,DISPLAY.NONE)在空⽩截图(iOS8)的调试中，返回的是true，前⾯！⼀取反，就是false，所以isVisible最终就返回
了false。我觉得离真相越来越近了。✌
那么，为什么同⼀⼀份代码，在iOS9即以后和iOS8的机器上container.style.display值会不同呢，我查看了下程序中css中display值的设置，发现是被设置为flex，突然想到是否iOS⽀持flex导致，直接上ca
niuse⼀查，发现iOS8的系统对flex的并不⽀持，只⽀持-webki-flex，此时，我⼼中就觉得问题⼀定是出在这个地⽅。紧接着，在iOS8调试，查看了将要截图的dom的style.display的值，如下图，很明显的可以看到，此时display的值
是-webkit-flex⽽不是flex
到这⾥，就可以肯定是由于display中的flex中iOS8中并不⽀持导致的了⽣成canvas失败。但是，为什么-webkit-flex就不能够成功⽣成canvas 能，直接看html2canvas的源码，在src/parsing/display中到了答案，如下图，原来在html2canvas中，会将css中的display中的值映射成⼀个数字，⽽在下图的映射表中，只要到了flex的映射值，并没有--webkit-flex的映射值，所以-webkit-flex被映射成了DISPLAY.NONE，从⽽导致了isVisible的计算值返回了false，最终导致了⽆法⽣成想要的canvas
html的flex布局解决⽅法
1. 不采⽤ flex布局
2. 修改html2canvas源码，将-webkit-flex也返回DISPLAY.FLEX
3. 不⽀持iOS8 ， 嘿嘿

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。