先說(shuō)下我要實(shí)現(xiàn)的需求： h5端做一個(gè)商品或者是圖片的分享吐根， 簡(jiǎn)單的來(lái)說(shuō) 就是html頁(yè)面轉(zhuǎn)為圖片分享到微信或者微博的功能
前端html代碼轉(zhuǎn)圖片璧微，第一個(gè)想到的當(dāng)然是canvas ?于是各種百度一波 ?接下來(lái)是漫漫入坑之路~
html2canvas?
百度一波后找到了html2canvas咪鲜， 官網(wǎng)http://html2canvas.hertzen.com/
官方文檔doem以及api很是簡(jiǎn)單粗暴
于是乎樓主我悠菜，滿心歡喜的拿起鍵盤就是一頓噼里啪啦寫
第一次嘗試： target就是DOM結(jié)構(gòu)扛门，我要把這個(gè)DOM結(jié)構(gòu)轉(zhuǎn)成canvas 然后再把canvas轉(zhuǎn)成base64烦衣，因?yàn)槲业腄OM結(jié)構(gòu)中的img的src是拿后臺(tái)返回回來(lái)的地址；
因?yàn)閳D片是線上的地址勤众，html2canvas轉(zhuǎn)canvas的時(shí)候會(huì)出現(xiàn)跨域的情況舆绎，各種百度后，看官網(wǎng)文檔加了allowTaint们颜，async 這兩貨為ture吕朵，完美解決跨域問(wèn)題，心里os 成功就在眼前了啊 ?.然鵝還是不能成功
樓主抱著只要思想不滑坡 辦法總比困難多的心態(tài) 繼續(xù)找度娘
解決圖片的跨域問(wèn)題：把圖片的地址轉(zhuǎn)成base64
goodsInfo是生成DOM的數(shù)據(jù)源，循環(huán)數(shù)組阻问，目的是想把數(shù)組里的ad_img項(xiàng)轉(zhuǎn)成base64 （這樣寫是有問(wèn)題梧税，然鵝樓主太年輕了，這個(gè)坑等會(huì)再填）
心里OS: 成功就在眼前了 啊哈哈哈哈哈啊
為什么會(huì)出現(xiàn)canvas被污染了 ?是因?yàn)槲抑凹恿薬sync?allowTaint 為ture,意思就是允許跨域哮塞，解決了跨域的問(wèn)題，但是canvas被污染凳谦，于是我把這兩個(gè)屬性去掉忆畅，圖片是能截出來(lái)了，但是不全尸执，于是終極版本邻眷，emm ?終于能轉(zhuǎn)成功了，在安卓上剔交，強(qiáng)調(diào)一下 是在安卓
于是測(cè)ios，然后我整個(gè)人都不好了改衩，ios上根本就沒(méi)有... ? 嚶嚶嚶
我的內(nèi)心是崩潰的 我只是個(gè)小前端岖常，為何要這樣對(duì)我 ?不寫了 ?我要去廁所哭一會(huì) ? 阿西吧~
痛定思痛，太多坑了葫督，換組件吧
蹬蹬~ ?domtoimage 登場(chǎng) ?github上4k多個(gè)星
再說(shuō)下我的需求啊 ? 我的目的就是要把HTML代碼轉(zhuǎn)成圖片的base64給后臺(tái)竭鞍，最后只是要base64 ?其他的都不重要，domtoimage 就是一款可以把html轉(zhuǎn)成base64的插件 ? ?ps ?終于等到你 還好我沒(méi)放棄
上代碼
點(diǎn)擊生成截圖的時(shí)候有閃屏的效果是因?yàn)槲业臉邮綄懙挠袉?wèn)題（抽我自己）
domtoimage代碼：拿到要生成base64的DOM,然后丟進(jìn)去洽胶，死活沒(méi)出來(lái)晒夹，我的內(nèi)心一萬(wàn)只草泥馬崩塌而過(guò)啊~
上面加了個(gè)dispaly:none ?這個(gè)元素就隱藏了，所以就用了domtoimage?
去掉紅框的那個(gè)屬性姊氓，然后就可以生成一坨base64了
激動(dòng)的都要哭了~~
到目前為止，基本上能實(shí)現(xiàn)需求了.
?總結(jié)：
1翔横，圖片轉(zhuǎn)base64的時(shí)候要注意的點(diǎn)
???img.setAttribute('crossOrigin', 'anonymous');這個(gè)一定要在src?前面
? ? img.src = url + '?v=' + Math.random(); // 處理緩存
2读跷， 這一段代碼： 遞歸
?場(chǎng)景： 要循環(huán)數(shù)組，然后拿到數(shù)組里面的每一項(xiàng)禾唁，用函數(shù)來(lái)處理每一項(xiàng)（異步）效览，循環(huán)完一個(gè)然后在去循環(huán)另一個(gè)，這個(gè)時(shí)候可以用到遞歸的寫法荡短，這樣就能保證了是異步的循環(huán)
ps: ?我自己最開(kāi)始的寫法是 直接map循環(huán)數(shù)組的丐枉，然后循環(huán)調(diào)用函數(shù)，這樣做是有bug的肢预，就是不能保證是不是上一個(gè)循環(huán)完了才循環(huán)的下一個(gè)矛洞，ps: ?啦· ? 這里相當(dāng)于是for循環(huán)數(shù)組，然后用沒(méi)循環(huán)一次，才調(diào)用異步函數(shù)沼本，也就是這里的dispatchFn
