團隊招聘

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

崗位職責(zé)：

• 負(fù)責(zé)快狗打車產(chǎn)品相關(guān)前端開發(fā)工作

• 通過技術(shù)提高FE團隊整體效率

任職要求：

• 本科及以上學(xué)歷

• 3年以上前端開發(fā)經(jīng)驗，負(fù)責(zé)過復(fù)雜應(yīng)用的前端設(shè)計和開發(fā)

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

• 有移動端開發(fā)經(jīng)驗，對前端工程化有較深的理解

• 熟悉小程序開發(fā)，有微信、支付寶、百度等小程序開發(fā)經(jīng)驗

• 有技術(shù)理想，致力于用技術(shù)去推動和改變前端研發(fā)

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

加分項：

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

• 參與開源項目or對開源社區(qū)有貢獻

聯(lián)系方式：

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

• 郵箱：wangchao@daojia-inc.com

• 微信：ljh5187

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

應(yīng)用場景

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

原理

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

結(jié)論與重點

• 圖片必須支持 CORS 跨域。

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

遇到的坑

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

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

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

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

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

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

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

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

補充

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

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

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

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

推薦閱讀

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

• 使用vue實現(xiàn)HTML頁面生成圖片
  

好文我在看????

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。