微信小程序之生成圖片分享朋友圈

時間 2019-11-12

標籤微信程序生成圖片分享朋友简体版

原文原文鏈接

經過社交軟件分享的方式來進行營銷小程序，是一個經常使用的運營途徑。小程序自己支持直接將一個小程序的連接卡片分享至微信好友或微信羣，而後別人就能夠經過點擊該卡片進入該小程序頁面。可是小程序目前不支持直接分享到微信朋友圈，而對咱們來講，微信朋友圈又是一個很重要的吸引別人關注的入口，因此，得想辦法把這個資源利用起來。html

可能有的人已經知道，微信小程序支持經過掃描/長按識別二維碼或小程序碼圖片的方式進入一個小程序首頁或小程序中某個特定頁面（如何生成這類常規二維碼、小程序碼，可參考《微信小程序之生成自定義參數小程序二維碼》這篇文章），咱們能夠將二維碼或小程序碼分享到朋友圈去。前端

不過，這種二維碼看起來比較單調，不太感人！vue

爲了提高吸引力，咱們能夠把這種用於分享出去的二維碼圖片作的儘可能美觀、有情景感一些，好比像騰訊出品的小程序《長城你造不造》裏生成的這種分享圖片：node

這種配有圖文的圖片，就比單單給一個硬邦邦的二維碼要吸引人得多啦！你是否是也想試試作這種分享圖呢？咱們今天就來討論一下如何實現這樣的分享圖。canvas

實現這種合併圖文的方案，選擇無外乎就是在前端作仍是在後端作。若是在後端作的話，可選的技術方案仍是挺多的，各類後端語言都有本身的繪圖工具庫，好比nodejs裏能夠用node-canvas來作，或者也能夠經過調用一些圖片編輯軟件（如ImageMagic）來實現。小程序

而在前端作的話，因爲微信小程序也提供了一系列基於canvas的繪圖相關API，因此繪製這樣的圖片仍是比較簡單易上手的，且調試起來也比較方便直觀。因此，決定先在小程序前端這邊來實現了。後端

添加畫布微信小程序

首先，在小程序裏進行繪圖操做須要用到組件，那咱們就先在咱們的wxml代碼中放入以下的：api

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

這樣一來咱們就有了一個600x900的繪圖區域。而後，咱們要開始寫JS代碼在這張畫布上進行繪圖操做。微信

步驟1：繪製背景圖

經過觀察《長城你造不造》合成的那張分享圖，咱們能夠分析得出它的組成主要有如下3個部分：一張大的背景圖，一段動態的文字（xxxx 喊你「一塊兒來爲修長城獻磚」），以及一個小程序碼圖片。

那麼咱們就先找一張圖片來當作背景圖，將它畫到畫布上去，代碼大體以下：

//這是一個封裝好的方法  
promisify: api => {
    return (options, ...params) => {
      return new Promise((resolve, reject) => {
        const extras = {
          success: resolve,
          fail: reject
        }
        api({ ...options, ...extras }, ...params)
      })
    }
  }

const wxGetImageInfo = promisify(wx.getImageInfo)
wxGetImageInfo({
    src: 'http://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: 'http://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: 'http://some-domain.com/background.png'
    }),
    wxGetImageInfo({
        src: 'http://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將上繪製的圖像生成臨時文件的形式，而後再經過wx.saveImageToPhotosAlbum進行保存到系統相冊的操做。

//保存海報

saveImageToPhoto: function () {

var that = this;

setTimeout(function () {

wx.canvasToTempFilePath({

x: 0,

y: 0,

width: 200,

height: 370,

destWidth: 1035,

destHeight: 1560,

canvasId: 'share_canvas',

success: function (res) {

console.log(res, '保存')

that.setData({

savedImgUrl: res.tempFilePath

})

}

})

}, 1000)

setTimeout(function () {

if (that.data.savedImgUrl != "") {

wx.saveImageToPhotosAlbum({

filePath: that.data.savedImgUrl,

success: function () {

wx.showModal({

title: '保存圖片成功',

content: '圖片已經保存到相冊，快去炫耀吧！',

showCancel: false,

success: function (res) {

that.setData({

canvasShow: false,

})

fail: function (res) { },

complete: function (res) { },

});

fail: function(res) {

console.log(res);

if (res.errMsg == "saveImageToPhotosAlbum:fail cancel") {

wx.showModal({

title: '保存圖片失敗',

content: '您已取消保存圖片到相冊！',

showCancel: false

});

} else {

wx.showModal({

title: '提示',

content: '保存圖片失敗，您能夠點擊肯定設置獲取相冊權限後再嘗試保存！',

complete: function(res) {

console.log(res);

if (res.confirm) {

wx.openSetting({}) //打開小程序設置頁面，能夠設置權限

} else {

wx.showModal({

title: '保存圖片失敗',

content: '您已取消保存圖片到相冊！',

showCancel: false

});

}

});

}

})

}

}, 1500)

根據業務需求能夠選擇（下載圖片而且顯示下載進度），

 downloadTask.onProgressUpdate((res) => {
       if (res.progress === 100) {
         this.setData({
          progress: ''
         });
       } else {
        this.setData({
           progress: res.progress + '%'
        });
     }