真幾把坑

需求

微信端的H5活動(dòng)

• 獲取到用戶頭像
• 生成關(guān)注公眾號使用的帶參數(shù)的二維碼
• 通過答題生成一張海報(bào)，海報(bào)長按保存，保存這張海報(bào)到手機(jī)。
• 用戶把這張圖片發(fā)送給朋友，朋友點(diǎn)開圖片識別圖中的二維碼。進(jìn)入公眾號執(zhí)行相關(guān)操作。

思路

• 先把整個(gè)布局做好
• 布局中把獲取到的微信頭像和二維碼用img加載好，放在<poster></poster>中
• 用html2canvas截取<poster>,生成圖片

坑來了。草

html2canvas截圖的跨域問題。這個(gè)不多說了。網(wǎng)上一大堆。沒幾個(gè)好用的。

我用過的方法如下，如果有看到的就別用了。

• 把微信頭像的src轉(zhuǎn)成base64位編碼。（http://thirdwx.qlogo.cn/類似這個(gè)地址， 可以用canvas畫?？梢援嫵鰜?。網(wǎng)上就好多，代碼拷貝就能用），轉(zhuǎn)換成base64之后，用html2canvas親測可以截出來。
• 微信的二維碼也用上面的方式，用canvas就不能轉(zhuǎn)base64了。后來找到qrcode.js，轉(zhuǎn)成功了。轉(zhuǎn)成功了之后，發(fā)現(xiàn)html2canvas截不了了。報(bào)跨域錯(cuò)誤。因?yàn)?code>mp.weixin.qq.com開頭的域名不支持跨域訪問。這幾把就坑了。網(wǎng)上說的用html2canvas自帶參數(shù)useCORS: true,這個(gè)是求用沒有。不知道你是不是當(dāng)真用這個(gè)解決了問題。反正我是沒解決?。。?！

那不多比比了，解決方案如下：

• 第一種：
  把前端代碼要部署到的服務(wù)器里設(shè)置nginx代理。代理到mp.weixin.qq.com,就不涉及到跨域問題。
• 第二種：
  把獲取到的微信二維碼地址發(fā)送給后臺(tái)。讓后臺(tái)出個(gè)接口。給你返回一個(gè)服務(wù)器域名的地址，（就是相當(dāng)于把二維碼下載到服務(wù)器磁盤，再給你一個(gè)服務(wù)器請求圖片的地址）

補(bǔ)充

• 如果我說的這兩種的其中任何一種解決不了。給我你的微信號。開視頻。我當(dāng)你面吃狗屎?。?！