微信小程序开发之卡片分享

前言

在微信小程序的开发中，可能会涉及到一个功能，就是卡片分享，卡片分享的主要技术点就是canvas(画布)，这篇文章就是记录一下如何用canvas制作一个卡片分享。

开发准备

本篇文章中用到的小程序基础库版本为2.22.0，因此，在canvas的使用上与低版本基础库有所区别，具体如下:

1. 从基础库 2.9.0 开始，停止维护wx.createCanvasContext，改为使用canvas.getContext(‘2d’)；
   

2. ctx.drawImage方法第一个参数不能直接使用图片地址，需要使用canvas.createImage()进行创建；

3. 2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性）；

4. 从基础库 1.9.90 开始，舍弃了部分属性方法，需要使用新版方法。

开始开发

先来看一下效果图：

1、变量定义

data: {
   
    name: '', //植物名称
    imageUrl: '', //图片
    localImageUrl: '', //本地临时路径
    codeUrl: '../../images/code.jpg', //小程序码
    appName: '植晓', //应用名称
    desc: '长按识别小程序码 / 带你认识植物',// 说明
    date: f.formatYmd(util.formatDate(new Date())),// 格式化日期
    _width: 0, //canvas区域的宽
    _height: 0, //canvas区域的高
    imgHeigth: 0, //原图片高度
    imgWidth: 0, //原图片宽度
    loadImagePath: '', //保存图片本地路径
    len: {
   
      "9": 280,
      "10": 302,
      "11": 327,
      "12": 352
    }, //计算日期的位置
    winWidth: app.globalData.systemInfo.windowWidth,
    winHeight: app.globalData.systemInfo.windowHeight,
    blc: 750, //比例，用来自适应图片和文字
  }

以上就是canvas绘制时需要用到的变量。
2、布局代码

<view class="index-container">
  <view class="index-daily-info">
    <canvas canvas-id="myCanvas" id="myCanvas" style="width:100%;height:100%;border-radius: 5px;" type="2d"></canvas>
  </view>
  <view class="index-operation">
    <view class="operation-btn">
      <button class="btn btn-share" open-type='share' style="width:280rpx;">分享给好友</button>
      <button class="btn btn-save" bindtap='saveImg' style="width:320rpx;">
        <image src="../../images/download.png" mode="aspectFill" style="width:40rpx;height:40rpx;margin-right:10rpx;">
        </image>保存植物美图
      </button>
    </view>
  </view>
</view>

注意：canvas上必须有id和type，type的值为2d。
3、功能代码
利用canvas进行图片绘制，需要注意的一个问题就是图片的适配，要保证绘制出来的图片不变形，因此，在绘制图片之前，我们需要进行一些必要计算。
首先，需要计算我们的卡片在每个机型上的宽和高，这里就需要用到节点选择wx.createSelectorQuery()，代码如下:

var query = wx.createSelectorQuery();
query.select('.index-daily-info').boundingClientRect(function (rect) {
   
	_this.setData({
   
        _width: rect.width.toFixed(0),// canvas的宽
        _height: rect.height.toFixed(2)// canvas的高
    })
    // 获取图片的信息
    wx.getImageInfo({
   
        src: _this.data.imageUrl, //服务器返回的带参数的小程序码地址
        success: function (res) {
   
          //res.path是网络图片的本地地址
          _this.setData({
   
            localImageUrl: res.path,
            imgHeigth: res.height,
            imgWidth: res.width
          })
          // 创建canvas图片
          _this.canvasImg()
        },
        fail: function (res) {
   
          //失败回调
        }
      });
}).exec();

然后，就是正式开始绘制，由于文字要适配各种机型，所以，需要计算一个缩放比例：

let scale = _this.data.winWidth / _this.data.blc //缩放比例

从效果图上可以看出，图片只占了卡片的一半高度，因此，需要将图片的高度固定在canvas一半高度左右：

let imgH = _height * 0.54 // 要显示的图片高度

除此之外，还需要计算图片与canvas的宽高比：

let dw = _width / imgWidth, //canvas与图片的宽高比
      dh = imgH / imgHei