摘要：本人建議第二種，更保險(xiǎn)三轉(zhuǎn)換的位圖不能被以上版本所識(shí)別。客戶使用的時(shí)候發(fā)現(xiàn)了這個(gè)問(wèn)題，沒(méi)法。五離成功只有一步之遙了，使用了之后安卓手機(jī)不能將圖片分享給朋友。識(shí)別不了問(wèn)題分析安卓能識(shí)別但不能識(shí)別矢量圖片解決辦法自己手寫咯。判斷手機(jī)為安卓還是。

首先做個(gè)自我介紹，我是成都某企業(yè)的一名剛剛?cè)胄屑s一年的前端，在之前的開發(fā)過(guò)程中，遇到了問(wèn)題，也解決了問(wèn)題，但是在下一次解決相同問(wèn)題的時(shí)候，只對(duì)這個(gè)問(wèn)題有一絲絲的印象，還需要從新去查找，于是，我注冊(cè)了segmemtfault，便于搜集我的問(wèn)題總結(jié)，以及將踩坑經(jīng)驗(yàn)分享給每一個(gè)開發(fā)人員，好了，閑話不多說(shuō)。

需求：要求能夠?qū)崿F(xiàn)根據(jù)后端返回的數(shù)據(jù)生成一張image，便于用戶將圖片分享到朋友或者朋友圈，取得用戶的關(guān)注。

一.html2canvas對(duì)于跨域圖片，轉(zhuǎn)換的時(shí)候會(huì)將跨域圖片識(shí)別為空白。
問(wèn)題分析：
既然是由于跨域引起的問(wèn)題，那我們讓資源不跨域不就可以訪問(wèn)了嗎？
解決辦法：
將圖片放置服務(wù)器，通過(guò)nginx進(jìn)行代理資源，前端訪問(wèn)圖片便不涉及到跨域問(wèn)題。

二.html2canvas動(dòng)態(tài)加載內(nèi)容，通過(guò)canvas轉(zhuǎn)換出來(lái)的數(shù)據(jù)，圖片為空
問(wèn)題分析：
內(nèi)容是動(dòng)態(tài)加載進(jìn)來(lái)的，轉(zhuǎn)換肯定是在請(qǐng)求完畢之后再去轉(zhuǎn)換，但是在請(qǐng)求完畢之后去轉(zhuǎn)換，按理說(shuō)所需要的所有數(shù)據(jù)都已經(jīng)到達(dá)前端，應(yīng)該可以轉(zhuǎn)換，經(jīng)過(guò)思考，發(fā)現(xiàn)圖片內(nèi)容從后臺(tái)讀取需要一定時(shí)間去解析，才能夠完整的將圖片資源展示出來(lái)，html2canvas是將頁(yè)面上顯示的dom元素，經(jīng)過(guò)解析將dom畫在canvas上在轉(zhuǎn)換為image圖片格式。
解決辦法：
1.讓html2canvas轉(zhuǎn)換代碼等待一定時(shí)間，在進(jìn)行轉(zhuǎn)換操作，可進(jìn)行轉(zhuǎn)換。代碼如下圖所示

2.當(dāng)全部的圖片數(shù)據(jù)都加載完畢之后，在執(zhí)行轉(zhuǎn)換操作。（本人建議第二種，更保險(xiǎn)）

三.html2canvas轉(zhuǎn)換的base64位圖不能被ios8以上版本所識(shí)別。會(huì)呈現(xiàn)出整個(gè)截圖頁(yè)面空白
問(wèn)題分析：
這個(gè)問(wèn)題的起因，應(yīng)該是html2canvas對(duì)高版本的ios不支持（自我感覺(jué)），這個(gè)問(wèn)題我很是頭疼，當(dāng)時(shí)根本沒(méi)有對(duì)ios進(jìn)行測(cè)試?？蛻羰褂玫臅r(shí)候發(fā)現(xiàn)了這個(gè)問(wèn)題，沒(méi)法。想辦法解決。百度說(shuō)是由于ios不能識(shí)別base64的前綴，于是我試過(guò)將圖片的前綴去除，但發(fā)現(xiàn)沒(méi)反應(yīng)。還是無(wú)用。思來(lái)想去感覺(jué)html2canvas坑太多了。填都填不完。于是。
解決辦法：
我采用了另一款插件，dom-to-image,弄上去沒(méi)有問(wèn)題了。

四.dom-to-image運(yùn)用上去，在ios上能夠出現(xiàn)內(nèi)容了，但發(fā)現(xiàn)存在一個(gè)問(wèn)題，部分圖片內(nèi)容，第一次進(jìn)行公眾號(hào)網(wǎng)頁(yè)加載，沒(méi)有正確顯示，要在次進(jìn)入才會(huì)顯示，此bug同樣是ios8以上版本
問(wèn)題分析：
這一個(gè)問(wèn)題我沒(méi)有找到問(wèn)題所在，一臉懵，不過(guò)最終還是得到了解決。
解決辦法：
運(yùn)用dom-to-imagede toSvg方式完美解決問(wèn)題。

五.離成功只有一步之遙了，使用了svg之后安卓手機(jī)不能將圖片分享給朋友。識(shí)別不了
問(wèn)題分析：
安卓能識(shí)別jpeg但不能識(shí)別svg矢量圖片
解決辦法：
自己手寫咯。判斷手機(jī)為安卓還是ios。

六.所有的問(wèn)題都已解決，我興奮的跑去借了個(gè)果5，拿來(lái)測(cè)試，發(fā)現(xiàn)網(wǎng)頁(yè)的背景圖片不見(jiàn)了。
問(wèn)題分析：
我長(zhǎng)按兩秒左右又是正常顯示了，故圖片是已經(jīng)完美轉(zhuǎn)換成功，可能是因?yàn)閳D片在轉(zhuǎn)換過(guò)程中，沒(méi)有完美適配到4.0寸的屏幕，
解決辦法：
模擬長(zhǎng)按事件，解決bug，這個(gè)方式可能不太好，但也是一種解決方式。

躺過(guò)的坑都是我的經(jīng)驗(yàn)，分享的同時(shí)我又加固了一遍。解決實(shí)際問(wèn)題的思路，在過(guò)了一遍，對(duì)我?guī)椭馨簟?/p>