問題描述
由于項目需要，需要將實現(xiàn)網(wǎng)頁截圖的功能，在網(wǎng)上進行一番搜索后，最后決定使用 html2canvas 的方式 將 dom -> canvas -> png 的方式來實現(xiàn)。實現(xiàn)成功后，在安卓和iOS9以上都可以實現(xiàn)截屏功能。但是在iOS8 系統(tǒng)上卻是截出了一張空白圖片。
系統(tǒng)環(huán)境
Html2canvas 版本 v1.0.0-alpha.10
結論
先給結論，下面有自己解決問題時的思路，不想看的可以忽略。
截出來的圖片是空白的原因由于被截屏的頁面使用flex布局，而由于iOS8的系統(tǒng)并不支持flex布局，只支持-webkit-flex布局，而html2canvas并不支持-webkit-flex，所以無法將html生成canvas，從而導致了截出一張白屏。
詳細分析過程
作為剛剛接觸一個多月的前端的iOS碼農(nóng)，一開始是一臉懵逼的。這時候，Google大佬就派上用場了，&,然而這次Google大佬也沒轍，也可能是我關鍵字搜錯了，反正沒找到答案。
無所不能的google跪了，那就只能擼起袖子自己干。
首先，先確定是什么原因導致生成的圖片是空白圖片。html2canvas使用很簡單，代碼如下：
html2canvas($('#share-page').get(0), {
scale:2,
useCORS:true
})
.then(function(canvas) {
letdataURL=canvas.toDataURL("image/png");
if(dataURL===undefined||dataURL===null) {
returnnull;
}
shareImage(dataURL)
})
這個過程一共分為2步： dom => canvas 和 canvas => image(base64) ，首先得確定是哪一個步驟出現(xiàn)了問題。首先，dataURL是否有值，測試結果是dataURL是由值的，生成的base64進行解碼后，就是一張空白的圖片。第二部，將canvas直接顯示在dom中，是否是空白的，測試結果是canvas的確是空白的，里面沒有繪制出任何內容。
確定是dom=> canvas 這個過程出現(xiàn)了問題，那么就得查看出現(xiàn)問題的原因是什么。由于這個版本的html2canvas是有打印出一些必要的日志的，最簡單的方法就是直接對比能夠成功截圖的日志和截出來圖是空白的日志。
通過對比，能夠發(fā)現(xiàn)成功截圖的日志中相比于空白截圖的日志多出了幾條日志，此時猜想是是否是html2canvas在iOS8系統(tǒng)上沒有辦法成功解析出dom，導致無法將dom里面的數(shù)據(jù)繪制到canvas中。抱著這個猜想，我直接去看html2canvas的源碼，直接搜索關鍵字Starting node parsing 定位到了node分析的地方，在html2canvas中有一個NodeParser.js的文件，顧名思義，主要是用于node的解析的，直接看到 parseNodeTree函數(shù)，發(fā)現(xiàn)里面有很多條件判斷，但是直接看代碼并不好發(fā)現(xiàn)到底哪一個條件判斷出現(xiàn)問題，導致解析出錯。所以，決定直接調試代碼，在parseNodeTree中打上斷點，一步一步調試，看到底是哪一個條件判斷出現(xiàn)了問題。最終，終于找到了出現(xiàn)問題的判斷 ，即下圖中被紅色圓圈標出的判斷，container.isVisible，這個判斷返回了false，導致了直接跳出，不繼續(xù)執(zhí)行下面的node解析。
那么，container.isVisible究竟是什么判斷呢，查看源碼得知，
可以看到isVisible是對node的style中的display和opacity 和 visibility 進行判斷。通過調整成功截圖(iOS10)和空白截圖(iOS8)，最終發(fā)現(xiàn)，這2者唯一的不同就是this.style.display這個值，在成功截圖(iOS10)的調試中，this.style.display的值為 128 ，而在空白截圖(iOS8)調試中，this.style.display的值為1，而contains(this.style.display,DISPLAY.NONE)的作用對傳入的2個值做位與操作，而DISPLAY.NONE所代表的數(shù)字就是1，contains(this.style.display,DISPLAY.NONE)在空白截圖(iOS8)的調試中，返回的是true，前面！一取反，就是false,所以isVisible最終就返回了false。我覺得離真相越來越近了。??
那么，為什么同一一份代碼，在iOS9即以后和iOS8的機器上container.style.display值會不同呢，我查看了下程序中css中display值的設置，發(fā)現(xiàn)是被設置為flex，突然想到是否iOS支持flex導致，直接上caniuse一查，發(fā)現(xiàn)iOS8的系統(tǒng)對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中的值映射成一個數(shù)字，而在下圖的映射表中，只要找到了flex的映射值，并沒有--webkit-flex的映射值，所以-webkit-flex被映射成了DISPLAY.NONE，從而導致了isVisible的計算值返回了false，最終導致了無法生成想要的canvas
解決方法
1. 不采用 flex布局
2. 修改html2canvas源碼，將-webkit-flex也返回DISPLAY.FLEX
3. 不支持iOS8 ， 嘿嘿??
