开发 | 小程序「分享图」生成难？一招教你轻松解决

shareBanner.png

每日推荐

许多小程序，都提供了「分享卡片」功能。但许多开发者会遇到「如何处理分享卡片图片」的难题：在服务器端处理，容易遇到服务器资源不足的问题。利用小程序 Canvas 组件，容易遇到 bug。

如果你也有同样烦恼，那么今天分享的这篇文章，也许会为你提供一个很好的参考。

不多说了，有图有真相，二当家上图喽！！！

前言

小程序只能转发给好友，或者转发到微信群，并不能转发到朋友圈，那么朋友圈的巨大流量应该怎么利用起来呢？

目前来看，很多小程序的做法是生成一张带小程序码的图片，然后用户可以分享图片到朋友圈，通过这样的方式来导朋友圈的流量。

但是这样做还是有一定风险的，有可能会被腾讯打上诱导分享的标签，具体可以做到什么程度还不是很清楚。

怎样生成图片并保存呢？这篇文章做一些简单的尝试，生成一个带文字和小程序码的图片，希望能对你有一些启发。

项目目录结构：

image

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 说明资料名。