項目需求寫完有一段時間了，但是還是想回過來總結(jié)一下，一是對項目的回顧優(yōu)化等，二是對坑的地方做個記錄，避免以后遇到類似的問題。

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

需求

利用微信強大的社交能力通過小程序達到裂變的目的，拉取新用戶。

生成的海報如下

需求分析

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

2、利用小程序生成海報保存圖片到相冊分享到朋友圈，用戶長按識別二維碼關(guān)注公眾號或者打開小程序來達到裂變的目的

實現(xiàn)方案

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

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

二、需要解決的問題

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

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

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

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

三、實現(xiàn)步驟

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

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

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

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

const ctx = wx.createCanvasContext('myCanvas')

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

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

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

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ò)錯誤請重試',
    icon: 'loading'
   })
   }
  })
  })
let avatarurl_width = 60, //繪制的頭像寬度
 avatarurl_heigth = 60, //繪制的頭像高度
 avatarurl_x = 28, //繪制的頭像在畫布上的位置
 avatarurl_y = 36; //繪制的頭像在畫布上的位置
 ctx.save(); // 先保存狀態(tài) 已便于畫完圓再用
 ctx.beginPath(); //開始繪制
 //先畫個圓 前兩個參數(shù)確定了圓心 （x,y） 坐標 第三個參數(shù)是圓的半徑 四參數(shù)是繪圖方向 默認是false，即順時針
 ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
 ctx.clip(); //畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi)
 ctx.drawImage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進去圖片

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

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

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

廣告

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