微信小程序制作海報(bào)并分享到朋友圈如何實(shí)現(xiàn)

小程序制作海報(bào)可以通過一些小程序直接上傳圖片實(shí)現(xiàn)，這里小編為大家介紹如何通過小程序自己制作海報(bào)并分享到朋友圈呢？

添加畫布

首先，在小程序里進(jìn)行繪圖操作需要用到<canvas>組件，那我們就先在我們的wxml代碼中放入如下的<canvas>：

<canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas>

這樣一來我們就有了一個(gè)600x900的繪圖區(qū)域。然后，我們要開始寫JS代碼在這張畫布上進(jìn)行繪圖操作。

步驟1：繪制背景圖

通過觀察《長城你造不造》合成的那張分享圖，我們可以分析得出它的組成主要有以下3個(gè)部分：一張大的背景圖，一段動(dòng)態(tài)的文字（xxxx 喊你“一起來為修長城獻(xiàn)磚”），以及一個(gè)小程序碼圖片。

那么我們就先找一張圖片來當(dāng)做背景圖，將它畫到畫布上去，代碼大致如下：

const wxGetImageInfo = promisify(wx.getImageInfo)

wxGetImageInfo({

    src: 'https://some-domain/bg.png'

}).then(res => {

    const ctx = wx.createCanvasContext('shareCanvas')

    ctx.drawImage(res.path, 0, 0, 600, 900)

    ctx.draw()

})

在這段代碼中，我們通過使用wx.getImageInfo這個(gè)API來下載一個(gè)網(wǎng)絡(luò)圖片到本地（并可獲取該圖片的尺寸等其他信息），然后調(diào)用ctx.drawImage方法將圖片繪制到畫布上，填滿畫布。

步驟2：繪制文字

接著，讓我們來在畫布上繼續(xù)繪制一段文字，一般這種宣傳用的分享圖，少不了文字描述，而且可能是根據(jù)場(chǎng)景內(nèi)容不同而產(chǎn)生的動(dòng)態(tài)信息，比如可能是一篇文章的作者、文章的標(biāo)題和內(nèi)容。

我們嘗試下在畫布上添加一段居中顯示的文字：“作者：一斤代碼”，還是基于前面的那段代碼接著寫：

const wxGetImageInfo = promisify(wx.getImageInfo)

wxGetImageInfo({

    src: 'https://some-domain/bg.png'

}).then(res => {

    const ctx = wx.createCanvasContext('shareCanvas')

    

    // 底圖

    ctx.drawImage(res.path, 0, 0, 600, 900)

    // 作者名稱

    ctx.setTextAlign('center')    // 文字居中

    ctx.setFillStyle('#000000')  // 文字顏色：黑色

    ctx.setFontSize(22)         // 文字字號(hào)：22px

    ctx.fillText(“作者：一斤代碼”, 600 / 2, 500)

    

    ctx.stroke()

    ctx.draw()

})

由于在canvas上繪制文字不會(huì)自動(dòng)折行，如果要畫一段比較長的文本，可以考慮限制一行的字?jǐn)?shù)，將長文本拆分成幾行來畫。

步驟3：繪制小程序碼

最后，我們?cè)诋嫴甲詈筇砑右粋€(gè)小程序碼，可以是靜態(tài)的小程序碼，也可以是比如為每一篇文章動(dòng)態(tài)生成的小程序碼（參考《微信小程序之生成自定義參數(shù)小程序二維碼》這篇文章），反正這個(gè)小程序碼也就是一張圖片，所以繪制方法跟繪制底圖差不多。最后的代碼類似如此：

const wxGetImageInfo = promisify(wx.getImageInfo)

Promise.all([

    wxGetImageInfo({

        src: 'https://some-domain.com/background.png'

    }),

    wxGetImageInfo({

        src: 'https://some-domain.com/api/generate/qrcode'

    })

]).then(res => {

    const ctx = wx.createCanvasContext('shareCanvas')

    

    // 底圖

    ctx.drawImage(res[0].path, 0, 0, 600, 900)

    // 作者名稱

    ctx.setTextAlign('center')    // 文字居中

    ctx.setFillStyle('#000000')  // 文字顏色：黑色

    ctx.setFontSize(22)         // 文字字號(hào)：22px

    ctx.fillText(“作者：一斤代碼”, 600 / 2, 500)

    // 小程序碼

    const qrImgSize = 180

    ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)

    ctx.stroke()

    ctx.draw()

})

這樣，差不多我們的分享圖就生成好了。

保存到系統(tǒng)相冊(cè)

接著，我們要把它保存進(jìn)用戶的系統(tǒng)相冊(cè)中去，實(shí)現(xiàn)這個(gè)功能，我們主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum這兩個(gè)API。

主要的流程就是先通過wx.canvasToTempFilePath將<canvas>上繪制的圖像生成臨時(shí)文件的形式，然后再通過wx.saveImageToPhotosAlbum進(jìn)行保存到系統(tǒng)相冊(cè)的操作。

const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath)

const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum)

wxCanvasToTempFilePath({

    canvasId: 'shareCanvas'

}, this).then(res => {

    return wxSaveImageToPhotosAlbum({

        filePath: res.tempFilePath

    })

}).then(res => {

    wx.showToast({

        title: '已保存到相冊(cè)'

    })

})

其中promise.util.js如下：

[javascript] view plain copy

/** 

 * 將wx的callback形式的API轉(zhuǎn)換成支持Promise的形式 

 */  

module.exports = {  

  

  promisify: api => {  

    return (options, ...params) => {  

      return new Promise((resolve, reject) => {  

        const extras = {  

          success: resolve,  

          fail: reject  

        }  

        api({ ...options, ...extras }, ...params)  

      })  

    }  

  }