前言
首先作個自我介紹，我是成都某企業的一名剛剛入行約一年的前端，在以前的開發過程當中，遇到了問題，也解決了問題，可是在下一次解決相同問題的時候，只對這個問題有一絲絲的印象，還須要重新去查找，因而，我註冊了segmemtfault，便於蒐集個人問題總結，以及將踩坑經驗分享給每個開發人員，好了，閒話很少說。
需求
需求：要求可以實現根據後端返回的數據生成一張image，便於用戶將圖片分享到朋友或者朋友圈，取得用戶的關注。
開始踩坑
一.html2canvas對於跨域圖片，轉換的時候會將跨域圖片識別爲空白。
問題分析：
既然是因爲跨域引發的問題，那咱們讓資源不跨域不就能夠訪問了嗎？
解決辦法：
將圖片放置服務器，經過nginx進行代理資源，前端訪問圖片便不涉及到跨域問題。html
二.html2canvas動態加載內容，經過canvas轉換出來的數據，圖片爲空
問題分析：
內容是動態加載進來的，轉換確定是在請求完畢以後再去轉換，可是在請求完畢以後去轉換，按理說所須要的全部數據都已經到達前端，應該能夠轉換，通過思考，發現圖片內容從後臺讀取須要必定時間去解析，纔可以完整的將圖片資源展現出來，html2canvas是將頁面上顯示的dom元素，通過解析將dom畫在canvas上在轉換爲image圖片格式。
解決辦法：
1.讓html2canvas轉換代碼等待必定時間，在進行轉換操做，可進行轉換。代碼以下圖所示前端
2.當所有的圖片數據都加載完畢以後，在執行轉換操做。（本人建議第二種，更保險）ios
三.html2canvas轉換的base64位圖不能被ios8以上版本所識別。會呈現出整個截圖頁面空白
問題分析：
這個問題的原由，應該是html2canvas對高版本的ios不支持（自我感受），這個問題我非常頭疼，當時根本沒有對ios進行測試。客戶使用的時候發現了這個問題，無法。想辦法解決。百度說是因爲ios不能識別base64的前綴，因而我試過將圖片的前綴去除，但發現沒反應。仍是無用。思來想去感受html2canvas坑太多了。填都填不完。因而。
解決辦法：
我採用了另外一款插件，dom-to-image,弄上去沒有問題了。nginx
四.dom-to-image運用上去，在ios上可以出現內容了，但發現存在一個問題，部分圖片內容，第一次進行公衆號網頁加載，沒有正確顯示，要在次進入纔會顯示，此bug一樣是ios8以上版本
問題分析：
這一個問題我沒有找到問題所在，一臉懵，不過最終仍是獲得瞭解決。
解決辦法：
運用dom-to-imagede toSvg方式完美解決問題。canvas
五.離成功只有一步之遙了，使用了svg以後安卓手機不能將圖片分享給朋友。識別不了
問題分析：
安卓能識別jpeg但不能識別svg矢量圖片
解決辦法：
本身手寫咯。判斷手機爲安卓仍是ios。後端
六.全部的問題都已解決，我興奮的跑去借了個果5，拿來測試，發現網頁的背景圖片不見了。
問題分析：
我長按兩秒左右又是正常顯示了，故圖片是已經完美轉換成功，多是由於圖片在轉換過程當中，沒有完美適配到4.0寸的屏幕，
解決辦法：
模擬長按事件，解決bug，這個方式可能不太好，但也是一種解決方式。跨域
總結
躺過的坑都是個人經驗，分享的同時我又加固了一遍。解決實際問題的思路，在過了一遍，對我幫助很棒。服務器