每日推薦

許多小程式，都提供了「分享卡片」功能。但許多開發者會遇到「如何處理分享卡片圖片」的難題：在伺服器端處理，容易遇到伺服器資源不足的問題。利用小程式 Canvas 元件，容易遇到 bug。

如果你也有同樣煩惱，那麼今天分享的這篇文章，也許會為你提供一個很好的參考。

不多說了，有圖有真相，二當家上圖嘍！！！

前言

小程式只能轉發給好友，或者轉發到微信群，並不能轉發到朋友圈，那麼朋友圈的巨大流量應該怎麼利用起來呢？

目前來看，很多小程式的做法是生成一張帶小程式碼的圖片，然後使用者可以分享圖片到朋友圈，通過這樣的方式來導朋友圈的流量。

但是這樣做還是有一定風險的，有可能會被騰訊打上誘導分享的標籤，具體可以做到什麼程度還不是很清楚。

怎樣生成圖片並儲存呢？這篇文章做一些簡單的嘗試，生成一個帶文字和小程式碼的圖片，希望能對你有一些啟發。

專案目錄結構：

wxml檔案

首先我們看一下wxml檔案：

<!--pages/test/canvas.wxml-->
<!-- 畫布大小按需定製 這裡我按照背景圖的尺寸定的  -->
<canvas canvas-id="shareImg" style="width:545px;height:771px"></canvas>
<!-- 預覽區域  -->
<view hidden='{{hidden}}' class='preview'>
  <image src='{{prurl}}' mode='widthFix'></image>
  <button type='primary' size='mini' bindtap='save'>儲存分享圖</button>
</view>
<button class='share' type='primary' bindtap='share'>生成分享圖</button>

 

js檔案

再看看JS檔案：

// pages/canvas/canvas.js
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    hidden: true
  },
  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/qrcode.jpg',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../images/qrbg.png',
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log(res)
      const ctx = wx.createCanvasContext('shareImg')
      //主要就是計算好各個圖文的位置
      ctx.drawImage('../../' + res[0].path, 158, 190, 210, 210)
      ctx.drawImage('../../' + res[1].path, 0, 0, 545, 771)
      ctx.setTextAlign('center')    
      ctx.setFillStyle('#ffffff')  
      ctx.setFontSize(22)        
      ctx.fillText('分享文字描述1', 545 / 2, 130)
      ctx.fillText('分享文字描述2', 545 / 2, 160)
      ctx.stroke()
      ctx.draw()
    })
  },
 /**
  * 生成分享圖
 */
  share: function () {
    var that = this
    wx.showLoading({
      title: '努力生成中...'
    })
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 545,
      height: 771,
      destWidth: 545,
      destHeight: 771,
      canvasId: 'shareImg',
      success: function (res) {
        console.log(res.tempFilePath);
        that.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
  /**
   * 儲存到相簿
  */
  save: function () {
    var that = this
    //生產環境時 記得這裡要加入獲取相簿授權的程式碼
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
        wx.showModal({
          content: '圖片已儲存到相簿，趕緊晒一下吧~',
          showCancel: false,
          confirmText: '好噠',
          confirmColor: '#72B9C3',
          success: function (res) {
            if (res.confirm) {
              console.log('使用者點選確定');
              that.setData({
                hidden: true
              })
            }
          }
        })
      }
    })
  }
})
 

css檔案

Css檔案：

/* pages/canvas/canvas.wxss */
canvas{
  position: fixed;
  top: 0;
  left: 400px;
}
.share{
  position: absolute;
  bottom: 100rpx;
  width: 70%;
  left: 15%;
  height: 100rpx;
  line-height: 100rpx;
}
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.9);
  position: absolute;
  z-index: 2;
}
.preview image{
  width: 70%;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 3;
  border: 1px dashed #fff;
}
.preview button{
  width: 40%;
  position: absolute;
  bottom: 150rpx;
  left: 30%;
}

注：如未能獲取成功，本人微信：geekxz 說明資料名。