項(xiàng)目需求寫(xiě)完有一段時(shí)間了，但是還是想回過(guò)來(lái)總結(jié)一下，一是對(duì)項(xiàng)目的回顧優(yōu)化等，二是對(duì)坑的地方做個(gè)記錄，避免以后遇到類(lèi)似的問(wèn)題。

需求

利用微信強(qiáng)大的社交能力通過(guò)小程序達(dá)到裂變的目的，拉取新用戶(hù)。

生成的海報(bào)如下

需求分析

1、利用小程序官方提供的api可以直接分享轉(zhuǎn)發(fā)到微信群打開(kāi)小程序

2、利用小程序生成海報(bào)保存圖片到相冊(cè)分享到朋友圈，用戶(hù)長(zhǎng)按識(shí)別二維碼關(guān)注公眾號(hào)或者打開(kāi)小程序來(lái)達(dá)到裂變的目的

實(shí)現(xiàn)方案

一、分析如何實(shí)現(xiàn)

相信大家應(yīng)該都會(huì)有類(lèi)似的迷惑，就是如何按照產(chǎn)品設(shè)計(jì)的那樣繪制成海報(bào)，其實(shí)當(dāng)時(shí)我也是不知道如何下手，認(rèn)真想了下得通過(guò)canvas繪制成圖片，這樣用戶(hù)保存這個(gè)圖片到相冊(cè)，就可以分享到朋友圈了。但是要繪制的圖片上面不僅有文字還有數(shù)字、圖片、二維碼等且都是活的，這個(gè)要怎么動(dòng)態(tài)生成呢。認(rèn)真想了下，需要一點(diǎn)一點(diǎn)的將文字和數(shù)字，背景圖繪制到畫(huà)布上去，這樣通過(guò)api最終合成一個(gè)圖片導(dǎo)出到手機(jī)相冊(cè)中。

二、需要解決的問(wèn)題

1、二維碼的動(dòng)態(tài)獲取和繪制（包括如何生成小程序二維碼、公眾號(hào)二維碼、打開(kāi)網(wǎng)頁(yè)二維碼）

2、背景圖如何繪制，獲取圖片信息

3、將繪制完成的圖片保存到本地相冊(cè)

4、處理用戶(hù)是否取消授權(quán)保存到相冊(cè)

三、實(shí)現(xiàn)步驟

這里我具體寫(xiě)下圍繞上面所提出的問(wèn)題，描述大概實(shí)現(xiàn)的過(guò)程

①首先創(chuàng)建canvas畫(huà)布,我把畫(huà)布定位設(shè)成負(fù)的,是為了不讓它顯示在頁(yè)面上,是因?yàn)槲覈L試把canvas通過(guò)判斷條件動(dòng)態(tài)的顯示和隱藏,在繪制的時(shí)候會(huì)出現(xiàn)問(wèn)題,所以采用了這種方法，這里還有一定要設(shè)置畫(huà)布的大小。

<canvas canvas-id="myCanvas" style="width: 690px;height:1085px;position: fixed;top: -10000px;"></canvas>

②創(chuàng)建好畫(huà)布之后，先繪制背景圖，因?yàn)楸尘皥D我是放在本地，所以獲取 <canvas> 組件 canvas-id 屬性，通過(guò) createCanvasContext 創(chuàng)建canvas的繪圖上下文 CanvasContext 對(duì)象。使用 drawImage 繪制圖像到畫(huà)布，第一個(gè)參數(shù)是圖片的本地地址，后面兩個(gè)參數(shù)是圖像相對(duì)畫(huà)布左上角位置的x軸和y軸，最后兩個(gè)參數(shù)是設(shè)置圖像的寬高。

const ctx = wx.createCanvasContext('myCanvas')