前端获取微信头像 base64 数据的踩坑实践
團(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小程序获取用户头像等用户信息
- 下一篇: 尚硅谷李立超老师讲解web前端---笔记