關(guān)鍵字：?Access-Control-Allow-Origin??disable cache
一、版本選擇
https://github.com/niklasvh/html2canvas
筆者寫文章時叼丑，html2canvas最新版本是v1.0.0-rc.5讼积，但是使用過程中采用的版本是1.0.0-alpha.9。原因是在?v1.0.0-rc.0開始烦衣，ios8的機器下歹河，如果截屏區(qū)域中有base64格式的圖片時掩浙，會出現(xiàn)error loading images的錯誤。為了兼容該機器秸歧，采用了較低版本厨姚。
二、白屏問題
相信大家都知道寥茫，html2canvas使用過程中經(jīng)常遇到白屏問題遣蚀，大致有幾種：
1、部分css3樣式不支持纱耻；
2芭梯、截屏?xí)r目標區(qū)域有部分不在可視區(qū)域中；
3弄喘、截屏部分中的圖片資源加載失敗導(dǎo)致的白屏玖喘；（此類解決方案可參考我另一篇文章中關(guān)于Blob的講解http://www.reibang.com/p/7e2a4b88e7ca）
4、圖片資源跨域
這里想闡述的是第4種跨域?qū)е碌陌灼聊⒅荆鋵嵔鉀Q方法很簡單累奈，只不過這里想寫寫整個過程中遇到的詭異現(xiàn)象。
首先急但，訪問跨域圖片資源澎媒，以下參數(shù)很重要：useCORS: true；但這只是客戶端的設(shè)置波桩，重要的是服務(wù)端要支持cors戒努。
html2canvas({ useCORS: true })
大家知道，html2canvas截圖時镐躲，無論截圖區(qū)域中的圖片是否加載完成储玫，都會重新加載圖片，從瀏覽器緩存機制來看：
1, 通過 <img> 加載的圖片萤皂，瀏覽器默認情況下會將其緩存起來撒穷。
2, 當(dāng)我們從 JS 的代碼中創(chuàng)建的 <img> 再去訪問同一個圖片時，瀏覽器就不會再發(fā)起新的請求裆熙，而是直接訪問緩存的圖片端礼。但是由于 JS 中的 <img> 設(shè)置了 crossorigin，也就意味著它將要以 CORS 的方式請求入录，但緩存中的圖片并未設(shè)置crossorigin齐媒，所以瀏覽器直接就拒絕了。連網(wǎng)絡(luò)請求都沒有發(fā)起纷跛∮骼ǎ控制臺報跨域。
但在筆者的調(diào)試過程中贫奠，在本地瀏覽器（瀏覽器并未強制跨域）使用html2canvas截圖時唬血，卻并未報圖片跨域望蜡，這讓筆者十分困惑。瀏覽器加載跨域的圖片資源時拷恨，響應(yīng)頭中參數(shù)為：
Access-Control-Allow-Credentials:?true
Access-Control-Allow-Origin:?0
圖片按理說應(yīng)該被跨域限制無法加載成功脖律，但神奇的是，瀏覽器重新又加載了一次該資源腕侄，此時響應(yīng)頭中的參數(shù)變?yōu)榱耍?/p>
Access-Control-Allow-Credentials:?true
Access-Control-Allow-Origin: true
what??
然鵝小泉，在測試環(huán)境中，圖片資源只會加載一次冕杠，便直接報跨域的錯微姊。
經(jīng)筆者仔細觀察，才發(fā)現(xiàn)原來在本地的chrome瀏覽器的network面板中分预，默認勾選了disable cache 選項兢交。從我們上面的分析中的第2點來看，此時瀏覽器不訪問緩存，瀏覽器重新發(fā)起了請求并且 JS 的 <img> 正常的請求到了圖片。
不過蹂安，瀏覽器為何會多次發(fā)起本來不支持cors的圖片資源，且成功的訪問到了資源晴裹，disable cache選項確實還是給筆者留下了深深的困惑，因此記錄下來救赐，警示后者涧团。
