團(tuán)隊(duì)招聘

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

崗位職責(zé)：

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

• 通過技術(shù)提高FE團(tuán)隊(duì)整體效率

任職要求：

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

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

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

• 有移動(dòng)端開發(fā)經(jīng)驗(yàn)，對(duì)前端工程化有較深的理解

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

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

• 良好的團(tuán)體合作精神，溝通能力強(qiáng)；

加分項(xiàng)：

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

• 參與開源項(xiàng)目or對(duì)開源社區(qū)有貢獻(xiàn)

聯(lián)系方式：

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

• 郵箱：wangchao@daojia-inc.com

• 微信：ljh5187

簡(jiǎn)歷投遞請(qǐng)注明”來(lái)自微信公眾號(hào)“

應(yīng)用場(chǎng)景

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

原理

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

結(jié)論與重點(diǎn)

• 圖片必須支持 CORS 跨域。

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

遇到的坑

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

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

在 PC 端瀏覽器上如果不使用 Disable cache, 會(huì)加載圖片失敗, 觸發(fā) onerror 回調(diào)因此在移動(dòng)端瀏覽器上測(cè)試會(huì)發(fā)現(xiàn)也是觸發(fā)的 onerror 回調(diào)(因?yàn)槲覀冊(cè)陧?yè)面中先預(yù)覽了一次微信用戶的頭像)。

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

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

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

2. 加載跨域的圖片時(shí)必須讓瀏覽器執(zhí)行跨域請(qǐng)求(CORS)(開啟 crossOrigin 機(jī)制), 否則將跨域的圖片繪制到 canvas 上會(huì)導(dǎo)致 canvas 被污染, 執(zhí)行 canvas.toDataURL 會(huì)因?yàn)榘踩L(fēng)險(xiǎn)而導(dǎo)致執(zhí)行失敗拋出異常。

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

補(bǔ)充

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

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

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

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

推薦閱讀

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

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

好文我在看????

總結(jié)

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

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