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

創(chuàng)新互聯(lián)建站公司2013年成立，先為五蓮等服務(wù)建站，五蓮等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為五蓮企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

需求

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

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

需求分析

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

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

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

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

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

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

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

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

<canvas canvas-id="myCanvas" ></canvas>

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

const ctx = wx.createCanvasContext('myCanvas')

ctx.drawImage('/img/study/shareimg.png', 0, 0, 690, 1085)

③創(chuàng)建好背景圖后，在背景圖上繪制頭像，文字和數(shù)字。通過(guò) getImageInfo 獲取頭像的信息，這里需要注意下在獲取的網(wǎng)絡(luò)圖片要先配置download域名才能生效，具體在小程序后臺(tái)設(shè)置里配置。

獲取頭像地址，首先量取頭像在畫布中的大小，和x軸Y軸的坐標(biāo)，這里的result[0]是我用promise封裝返回的一個(gè)圖片地址

let headImg = new Promise(function (resolve) {
  wx.getImageInfo({
   src: `${app.globalData.baseUrl2}${that.data.currentChildren.headImg}`,
   success: function (res) {
   resolve(res.path)
   },
   fail: function (err) {
   console.log(err)
   wx.showToast({
    title: '網(wǎng)絡(luò)錯(cuò)誤請(qǐng)重試',
    icon: 'loading'
   })
   }
  })
  })
let avatarurl_width = 60, //繪制的頭像寬度
 avatarurl_heigth = 60, //繪制的頭像高度
 avatarurl_x = 28, //繪制的頭像在畫布上的位置
 avatarurl_y = 36; //繪制的頭像在畫布上的位置
 ctx.save(); // 先保存狀態(tài) 已便于畫完圓再用
 ctx.beginPath(); //開(kāi)始繪制
 //先畫個(gè)圓 前兩個(gè)參數(shù)確定了圓心 （x,y） 坐標(biāo) 第三個(gè)參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認(rèn)是false，即順時(shí)針
 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
 ctx.clip(); //畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個(gè)區(qū)域，則所有之后的繪圖都會(huì)被限制在被剪切的區(qū)域內(nèi)
 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進(jìn)去圖片

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法-創(chuàng)新互聯(lián)
文章地址：http://chinadenli.net/article42/hgjec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站導(dǎo)航、網(wǎng)站建設(shè)、ChatGPT、品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)