前言

先說一下開發(fā)背景，我們公司是做 IT 培訓的，公司在各種節(jié)日的時候都會以海報的形式發(fā)布各種優(yōu)惠活動，以促進更多的報名量，海報中帶有公司的二維碼，通過二維碼就能聯(lián)系到我們公司的客服小姐姐（效果看下圖）

但這樣的宣傳力度有限，畢竟沒人幫你宣傳，因為分享難（沒）度（有）太（好）大（處），為了讓更多的人參與其中并從受益，從而達到裂變的效果，公司提出了這么一個需求：開發(fā)一個生成海報功能，讓用戶能在海報中放上自己的專屬二維碼和頭像。

這樣的好處是，通過你的海報報名的學生，你會從中得到一定的收益（想了解收益詳情的可以聯(lián)系我）。作為該活動的提出者，開發(fā)的任務自然就落到我的頭上（我為什么要提出這活動方案!)

硬著頭皮上唄！主是之前沒在小程序中做過類似這樣的功能，我大概知道要用 Canvas 來實現(xiàn)，有想法就上

技術背景

原生微信小程序開發(fā)使用的技術就不用說了

wxml

javascript

json

wxss?

（我還是說了）

UI使用的有贊的vant-weapp，后端采用的是 云開發(fā)

小程序整體頁面效果

準備工作

在生成海報之前需要準備：海報圖片，個人二維碼圖片以及頭像圖片

一、 獲取海報信息

海報圖片就用上面的海報，上面的客服二維碼先不用管，一會我們用自己的二維碼覆蓋上去。

我的海報圖片是放在小程序云存儲中，所以在data中使用posterUrl存放地址就行，還需要獲取二維碼在海報中的位置，使用qrcodePosition存放

二、 獲取二維碼信息

二維碼一般由用戶上傳，使用wx.chooseMedia()讓用戶在相冊中自行選擇個人二維碼

wxml結構代碼如下：

結構中做了個判斷，用戶沒選擇二維碼時顯示一個圖標，選擇后顯示二維碼圖片和刪除按鈕，效果如下

JS代碼如下：

三、獲取頭像信息

頭像獲取使用微信的“頭像選擇”功能，讓用戶可以使用微信頭像或相冊中選取一張圖片作為的頭像，也可以現(xiàn)場自拍一張，效果如下：

wxml結構代碼如下：

與二維碼一樣，wxml結構中做了個判斷，用戶沒選擇頭像時顯示一個圖標，選擇后顯示頭像圖片和刪除按鈕，效果如下：

PS: 頭像這里我還做了一樣功能，當用戶之前授權過頭像獲取時自動選擇，從而減少用戶的步驟

JS代碼如下：

四、獲取畫布信息

wxml中的代碼：

小程序中沒有DOM，不能用document獲取頁面元素，需要通過wx.createSelectorQuery()進行獲取，同時還能獲取canvas畫布的寬高信息

JS代碼如下：

五、生成海報

以上步驟全部完成后就可以開始生成海報了，先獲取幾張圖片的信息，我們使用微信自帶的wx.getImageInfo()獲取海報圖片的地址、寬高等信息

PS: 生成海報時需要時臨時文件或者是本地文件，如果是網(wǎng)絡圖片，需要通過 wx.getImageInfo() 獲取圖片的臨時路徑

1. 獲取海報圖片信息

2. 獲取二維碼圖片信息

3. 獲取頭像圖片信息

4. 開始生成帶二維碼和頭像的專屬海報

接著就可以利用canvas畫布按我們的需求生成專屬海報了（以下代碼接著上面四、獲取畫布信息的代碼繼續(xù)編寫）

1）根據(jù)海報高度自動調(diào)節(jié)canvas高度

PS：需要使用設備像素比來調(diào)節(jié)畫布大小，否則 canvas 保存的圖片會很模糊，我們需要對 canvas 畫布進行多倍處理

2）繪制海報

3）繪制二維碼

4）繪制頭像

5. 最終海報效果

圖片效果可能看得不是很清楚，大家可以搜索趣學旅程小程序測試效果（也可以掃下小程序碼進入）

六、輸出圖片保存并分享

使用wx.canvasToTempFilePath()從canvas中輸出圖片，得到一個臨時地址，還需要通過wx.saveImageToPhotosAlbum()保存到相冊，JS代碼如下：

PS：分享功能設置好小程序的onShareAppMessage就可以了，這里就不展開了，小伙伴們請自行處理

結語

好了，如何在微信小程序中生成帶個人二維碼和頭像的教程就寫到這，有問題的小伙伴歡迎在評論區(qū)討論，最后附上我生成的專屬海報，后面會繼續(xù)推出一些實用的教程，請繼續(xù)關注