真幾把坑
需求
微信端的H5活動(dòng)
- 獲取到用戶(hù)頭像
- 生成關(guān)注公眾號(hào)使用的帶參數(shù)的二維碼
- 通過(guò)答題生成一張海報(bào)，海報(bào)長(zhǎng)按保存淫僻，保存這張海報(bào)到手機(jī)。
- 用戶(hù)把這張圖片發(fā)送給朋友，朋友點(diǎn)開(kāi)圖片識(shí)別圖中的二維碼库正。進(jìn)入公眾號(hào)執(zhí)行相關(guān)操作。
思路
- 先把整個(gè)布局做好
- 布局中把獲取到的微信頭像和二維碼用img加載好厘唾，放在
<poster></poster>中 - 用html2canvas截取
<poster>,生成圖片
坑來(lái)了褥符。草
html2canvas截圖的跨域問(wèn)題。這個(gè)不多說(shuō)了抚垃。網(wǎng)上一大堆喷楣。沒(méi)幾個(gè)好用的。
我用過(guò)的方法如下鹤树，如果有看到的就別用了铣焊。
- 把微信頭像的src轉(zhuǎn)成base64位編碼。（
http://thirdwx.qlogo.cn/類(lèi)似這個(gè)地址魂迄， 可以用canvas畫(huà)粗截。可以畫(huà)出來(lái)捣炬。網(wǎng)上就好多熊昌，代碼拷貝就能用），轉(zhuǎn)換成base64之后湿酸，用html2canvas親測(cè)可以截出來(lái)婿屹。 - 微信的二維碼也用上面的方式，用canvas就不能轉(zhuǎn)base64了推溃。后來(lái)找到
qrcode.js昂利，轉(zhuǎn)成功了。轉(zhuǎn)成功了之后，發(fā)現(xiàn)html2canvas截不了了蜂奸。報(bào)跨域錯(cuò)誤犁苏。因?yàn)?code>mp.weixin.qq.com開(kāi)頭的域名不支持跨域訪(fǎng)問(wèn)。這幾把就坑了扩所。網(wǎng)上說(shuō)的用html2canvas自帶參數(shù)useCORS: true,這個(gè)是求用沒(méi)有围详。不知道你是不是當(dāng)真用這個(gè)解決了問(wèn)題。反正我是沒(méi)解決Ｗ嫫痢Ｖ蕖！袁勺！
那不多比比了雹食，解決方案如下：
- 第一種：
把前端代碼要部署到的服務(wù)器里設(shè)置nginx代理。代理到mp.weixin.qq.com,就不涉及到跨域問(wèn)題期丰。 - 第二種：
把獲取到的微信二維碼地址發(fā)送給后臺(tái)群叶。讓后臺(tái)出個(gè)接口。給你返回一個(gè)服務(wù)器域名的地址咐汞，（就是相當(dāng)于把二維碼下載到服務(wù)器磁盤(pán)盖呼，再給你一個(gè)服務(wù)器請(qǐng)求圖片的地址）
補(bǔ)充
- 如果我說(shuō)的這兩種的其中任何一種解決不了。給我你的微信號(hào)化撕。開(kāi)視頻。我當(dāng)你面吃狗屎Ｔ佳住Ｖ惨酢！
