1. Html2Canvas 受限于瀏覽器的同源策略， 若是使用非同源的圖片會(huì)taint（污染）畫布剪决， 畫布污染后將不能讀取灵汪，默認(rèn)allowTaint 為false， 不允許污染畫布柑潦，同時(shí)圖片也不能畫在畫布上享言。
其屬性allowTaint: true , 可以設(shè)置成允許畫布被污染， 則可以直接繪制出跨域圖片渗鬼；
2. 使用 allowTait： true 雖然可以將跨域的圖片的html 轉(zhuǎn)為canvas 览露，但是當(dāng)想讀取此Canvas具體信息時(shí)，如 getImageData譬胎， toDataUrl 方法卻會(huì)報(bào)錯(cuò)差牛，原因是被污染的畫布 因?yàn)橥床呗远嬖诎踩珕栴}。
解決辦法 ：1） 使用 crossOrigin 屬性堰乔。
具體分析 ：解決canvas圖片getImageData,toDataURL跨域問題
2）設(shè)置 useCORS： true 多糠， 原理相同，但使用以上跨域方法浩考， 若同時(shí)設(shè)置為 allowTaint： true 夹孔， 仍然會(huì)認(rèn)為畫布已被污染而不可用；
3. html2Canvas 雖然使用廣泛析孽，但是現(xiàn)在支持很少了搭伤。 實(shí)際在使用時(shí)，要注意其實(shí)際對(duì)于css 屬性的支持袜瞬， 像是超過長度則顯示省略號(hào)這種效果怜俐，實(shí)際使用 text-overflow 等是不支持的，最好是一邊寫html邓尤，一邊生成Canvas 生成效果拍鲤。
但是這樣你以為就安全了么。汞扎。然并卵季稳。。澈魄。html2Canvas 實(shí)際在 PC 和Android 上都能完美呈現(xiàn)時(shí)景鼠， 在ios 上也會(huì)出幺蛾子。痹扇。铛漓。比如：
星星不見了溯香。。 星星實(shí)際實(shí)現(xiàn)是使用 字體圖標(biāo)浓恶， 實(shí)際測試 發(fā)現(xiàn)ios 對(duì) :before, :after 不支持玫坛。。
解決辦法： 去掉:before偽類包晰，改為直接使用unicode 碼形式湿镀；
4. 關(guān)于字體圖標(biāo)
使用瀏覽器打開頁面時(shí)，瀏覽器會(huì)讀取 HTML 文件進(jìn)行解析渲染杜窄，對(duì)于html中的文字會(huì)轉(zhuǎn)換成對(duì)應(yīng)的 unicode碼肠骆，再根據(jù)HTML 里設(shè)置的 font-family （如果沒設(shè)置則使用瀏覽器默認(rèn)設(shè)置）去查找電腦里（如果有自定義字體@font-face 算途，則加載對(duì)應(yīng)字體文件）對(duì)應(yīng)字體的字體文件塞耕，找到文件后根據(jù) unicode 碼去查找繪制外形，找到后繪制到頁面上嘴瓤。
字體圖標(biāo)實(shí)現(xiàn)原理就是這樣了扫外， 各種圖標(biāo)使用自己的字體庫來對(duì)unicode 碼進(jìn)行顯示設(shè)計(jì)， 實(shí)際在實(shí)現(xiàn)時(shí)為了更好的可讀性使用了 classname + :before 廓脆。
作者：撿了幸福的豬
鏈接：http://www.reibang.com/p/b75cd3684828
來源：簡書
著作權(quán)歸作者所有筛谚。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處停忿。
