微信小程序制作海報并分享到朋友圈怎么實現

本篇內容介紹了“微信小程序制作海報并分享到朋友圈怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

添加畫布

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

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

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

步驟1：繪制背景圖

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

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

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來下載一個網絡圖片到本地（并可獲取該圖片的尺寸等其他信息），然后調用ctx.drawImage方法將圖片繪制到畫布上，填滿畫布。

步驟2：繪制文字

接著，讓我們來在畫布上繼續繪制一段文字，一般這種宣傳用的分享圖，少不了文字描述，而且可能是根據場景內容不同而產生的動態信息，比如可能是一篇文章的作者、文章的標題和內容。

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

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上繪制文字不會自動折行，如果要畫一段比較長的文本，可以考慮限制一行的字數，將長文本拆分成幾行來畫。

步驟3：繪制小程序碼

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

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()

})

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

保存到系統相冊

接著，我們要把它保存進用戶的系統相冊中去，實現這個功能，我們主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum這兩個API。

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

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轉換成支持Promise的形式 

 */  

module.exports = {  

  promisify: api => {  

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

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

        const extras = {  

          success: resolve,  

          fail: reject  

        }  

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

      })  

    }  

  }  

“微信小程序制作海報并分享到朋友圈怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！