團隊招聘

正文開始前，插播一則招聘信息。歡迎感興趣的同學投遞簡歷。

崗位職責：

• 負責快狗打車產品相關前端開發工作

• 通過技術提高FE團隊整體效率

任職要求：

• 本科及以上學歷

• 3年以上前端開發經驗，負責過復雜應用的前端設計和開發

• 熟悉web前端技術，熟悉React/Vue等任意一種前端框架

• 有移動端開發經驗，對前端工程化有較深的理解

• 熟悉小程序開發，有微信、支付寶、百度等小程序開發經驗

• 有技術理想，致力于用技術去推動和改變前端研發

• 良好的團體合作精神，溝通能力強；

加分項：

• 熟悉任意一門服務端語言（java/php/python/ruby/golang/nodejs）

• 參與開源項目or對開源社區有貢獻

聯系方式：

• 地址：北京市朝陽區北苑路桑普大廈6層

• 郵箱：wangchao@daojia-inc.com

• 微信：ljh5187

簡歷投遞請注明”來自微信公眾號“

應用場景

前端生成一張圖片, 一般是基于頁面的內容(DOM)生成一張用于分享的海報形式的圖片(例如通過 html2canvas)。不過當分享的圖片要包含微信用戶的頭像時(圖片位于 thirdwx.qlogo.cn 域名,沒有轉存到自己的域名下)，微信用戶的頭像圖片相當于頁面是跨域的。我們如何解決此場景下獲取微信頭像的問題。

原理

想要獲取圖片的 base64 數據, 我們大概都知道, 需要將圖片繪制到 canvas 上, 再通過 toDataURL 方法拿到 DataURL 數據, 即 base64 的圖片數據。

結論與重點

• 圖片必須支持 CORS 跨域。

• 避免觸發瀏覽器的緩存機制。以免瀏覽器拿到的是緩存數據而沒有攜帶 CORS 策略

遇到的坑

1. 當加載圖片時, 如果開啟了 crossOrigin 機制, 服務器必須遵循 CORS 規范, 返回 Access-Control-Allow-Origin 頭, 否則會被瀏覽器阻止(cancel)掉, 觸發 onerror 回調。

由于微信頭像默認加載時不會返回 CORS 規范, 只有在請求時開啟 Origin 才會返回 CORS 規范的內容。

在 PC 端瀏覽器上如果不使用 Disable cache, 會加載圖片失敗, 觸發 onerror 回調因此在移動端瀏覽器上測試會發現也是觸發的 onerror 回調(因為我們在頁面中先預覽了一次微信用戶的頭像)。

如果需要解決這個問題, 可以在第一次加載微信用戶頭像的時候就開啟 crossOrigin 機制(但不排除命中其他應用種下的緩存)。例如:?

<img src="http://thirdwx.qlogo.cn/xx/132" crossorigin="anonymous">。

或者再次加載圖片的時候帶上隨機參數, 避免瀏覽器緩存(這個方案更穩定靠譜)。

2. 加載跨域的圖片時必須讓瀏覽器執行跨域請求(CORS)(開啟 crossOrigin 機制), 否則將跨域的圖片繪制到 canvas 上會導致 canvas 被污染, 執行 canvas.toDataURL 會因為安全風險而導致執行失敗拋出異常。

3. 開啟 html2canvas 的 useCORS 選項, 理論上就是運用 CORS 機制跨域加載圖片。但受緩存的影響,生成的圖片會沒有微信頭像。因此可以先自行獲取到圖片的 base64 數據, 替換掉圖片的 src 避免產生跨域的問題。另外，如果開啟了 allowTaint 選項, 會導致生成圖片失敗。

補充

關于在 HTTPS 的頁面中加載 HTTP 的內容, 我們的印象中是所有的 HTTP 的內容都會被瀏覽器阻止。例如我們常見的 CSS/JS/XHR 都會被瀏覽器阻止, 瀏覽器會給出 ERROR 級別的錯誤。

注意: 早期的瀏覽器版本(我測試的 chrome 12 版本), 混合的 HTTP 內容都可以加載成功, 不會被瀏覽器屏蔽, 只是有警告。

但事實并不是這樣的, 但發現圖片內容是可以加載成功的, 不會被瀏覽器阻止, 由此可以推斷出媒體類無代碼執行權限的內容(即純用于顯示的內容)是不會被瀏覽器阻止的, 只是給出 WARN 級別的警告信息。

在開發的過程中需要生成帶微信頭像的圖片, 在 PC 端(因為開發習慣了使用 Disable cache)測試都是可以的, 一到移動端就不行了, 試過很多辦法后無果(〒_〒 絕望了...) 突發奇想將微信頭像 URL 的 HTTPS 替換成 HTTP, 發現就能夠獲取到 base64 的數據了, 很是詭異. 現在理清楚背后的故事, 原來是緩存在作怪, 只要不觸發瀏覽器的緩存就能夠通過 CORS 跨域機制獲取到圖片的 base64 的數據。

推薦閱讀

• 微信小程序圖片保存到本地問題解決回顧

• 使用vue實現HTML頁面生成圖片
  

好文我在看????

總結

以上是生活随笔為你收集整理的前端获取微信头像 base64 数据的踩坑实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。