項(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')
|
新聞熱點(diǎn)
疑難解答
圖片精選