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

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

添加畫布

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

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

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

步驟1：繪制背景圖

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

那么我們就先找一張圖片來當(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這個API來下載一個網(wǎng)絡(luò)圖片到本地（并可獲取該圖片的尺寸等其他信息），然后調(diào)用ctx.drawImage方法將圖片繪制到畫布上，填滿畫布。

步驟2：繪制文字

接著，讓我們來在畫布上繼續(xù)繪制一段文字，一般這種宣傳用的分享圖，少不了文字描述，而且可能是根據(jù)場景內(nèi)容不同而產(chǎn)生的動態(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)         // 文字字號：22px

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

    

    ctx.stroke()

    ctx.draw()

})

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

步驟3：繪制小程序碼

最后，我們在畫布最后添加一個小程序碼，可以是靜態(tài)的小程序碼，也可以是比如為每一篇文章動態(tài)生成的小程序碼（參考《微信小程序之生成自定義參數(shù)小程序二維碼》這篇文章），反正這個小程序碼也就是一張圖片，所以繪制方法跟繪制底圖差不多。最后的代碼類似如此：

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)         // 文字字號：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)相冊

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

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

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: '已保存到相冊'

    })

})

其中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)  

      })  

    }  

  }