資訊專欄INFORMATION COLUMN
摘要：本人建議第二種，更保險三轉換的位圖不能被以上版本所識別。客戶使用的時候發現了這個問題，沒法。五離成功只有一步之遙了，使用了之后安卓手機不能將圖片分享給朋友。識別不了問題分析安卓能識別但不能識別矢量圖片解決辦法自己手寫咯。判斷手機為安卓還是。
前言
首先做個自我介紹，我是成都某企業的一名剛剛入行約一年的前端，在之前的開發過程中，遇到了問題，也解決了問題，但是在下一次解決相同問題的時候，只對這個問題有一絲絲的印象，還需要從新去查找，于是，我注冊了segmemtfault，便于搜集我的問題總結，以及將踩坑經驗分享給每一個開發人員，好了，閑話不多說。需求
需求：要求能夠實現根據后端返回的數據生成一張image，便于用戶將圖片分享到朋友或者朋友圈，取得用戶的關注。開始踩坑
一.html2canvas對于跨域圖片，轉換的時候會將跨域圖片識別為空白。
問題分析：
既然是由于跨域引起的問題，那我們讓資源不跨域不就可以訪問了嗎？
解決辦法：
將圖片放置服務器，通過nginx進行代理資源，前端訪問圖片便不涉及到跨域問題。
二.html2canvas動態加載內容，通過canvas轉換出來的數據，圖片為空
問題分析：
內容是動態加載進來的，轉換肯定是在請求完畢之后再去轉換，但是在請求完畢之后去轉換，按理說所需要的所有數據都已經到達前端，應該可以轉換，經過思考，發現圖片內容從后臺讀取需要一定時間去解析，才能夠完整的將圖片資源展示出來，html2canvas是將頁面上顯示的dom元素，經過解析將dom畫在canvas上在轉換為image圖片格式。
解決辦法：
1.讓html2canvas轉換代碼等待一定時間，在進行轉換操作，可進行轉換。代碼如下圖所示
2.當全部的圖片數據都加載完畢之后，在執行轉換操作。（本人建議第二種，更保險）
三.html2canvas轉換的base64位圖不能被ios8以上版本所識別。會呈現出整個截圖頁面空白
問題分析：
這個問題的起因，應該是html2canvas對高版本的ios不支持（自我感覺），這個問題我很是頭疼，當時根本沒有對ios進行測試。客戶使用的時候發現了這個問題，沒法。想辦法解決。百度說是由于ios不能識別base64的前綴，于是我試過將圖片的前綴去除，但發現沒反應。還是無用。思來想去感覺html2canvas坑太多了。填都填不完。于是。
解決辦法：
我采用了另一款插件，dom-to-image,弄上去沒有問題了。
四.dom-to-image運用上去，在ios上能夠出現內容了，但發現存在一個問題，部分圖片內容，第一次進行公眾號網頁加載，沒有正確顯示，要在次進入才會顯示，此bug同樣是ios8以上版本
問題分析：
這一個問題我沒有找到問題所在，一臉懵，不過最終還是得到了解決。
解決辦法：
運用dom-to-imagede toSvg方式完美解決問題。
五.離成功只有一步之遙了，使用了svg之后安卓手機不能將圖片分享給朋友。識別不了
問題分析：
安卓能識別jpeg但不能識別svg矢量圖片
解決辦法：
自己手寫咯。判斷手機為安卓還是ios。
六.所有的問題都已解決，我興奮的跑去借了個果5，拿來測試，發現網頁的背景圖片不見了。
問題分析：
我長按兩秒左右又是正常顯示了，故圖片是已經完美轉換成功，可能是因為圖片在轉換過程中，沒有完美適配到4.0寸的屏幕，
解決辦法：
模擬長按事件，解決bug，這個方式可能不太好，但也是一種解決方式。
躺過的坑都是我的經驗，分享的同時我又加固了一遍。解決實際問題的思路，在過了一遍，對我幫助很棒。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52858.html
摘要：本人建議第二種，更保險三轉換的位圖不能被以上版本所識別。客戶使用的時候發現了這個問題，沒法。五離成功只有一步之遙了，使用了之后安卓手機不能將圖片分享給朋友。識別不了問題分析安卓能識別但不能識別矢量圖片解決辦法自己手寫咯。判斷手機為安卓還是。 前言 首先做個自我介紹，我是成都某企業的一名剛剛入行約一年的前端，在之前的開發過程中，遇到了問題，也解決了問題，但是在下一次解決相同問題的時候，只...
摘要：由于客戶的需求，將寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯一開始使用的是。功能是可以實現，但是有缺陷。用附件中的畫畫和其他工具打開又沒有什么問題下了班等下回去家里的電腦看看由于客戶的需求，將js寫出來的一個統計能夠保存到本地。作為碼奴的我只能慢慢搬磚咯！一開始使用的是html2canvas.js。功能是可以實現，但是有缺陷。話不多說開始搞！ 1、引入幾個JS庫 ①：jque...
閱讀 2000·2023-04-25 16:53
閱讀 1441·2021-10-13 09:39
閱讀 605·2021-09-08 09:35
閱讀 1639·2019-08-30 13:03
閱讀 2120·2019-08-30 11:06
閱讀 1830·2019-08-30 10:59
閱讀 3188·2019-08-29 17:00
閱讀 2287·2019-08-23 17:55
