【小程序】如何手动绘制分享用的图片

上一篇【小程序】如何实现滑动翻页中介绍了如何在小程序中实现上下滑动翻页的效果。

如果要给这个产品增加一个生成图片用于分享到朋友圈的功能，又该如何实现呢？

先来看一下最终的效果图：

首先，新建一个页面（page），布局文件如下：

<!-- pages/biases/share.wxml -->
<view class="container">
  <canvas id="myCanvas" type="2d" />
  <view class="save-btn" bind:tap="onSavePicture">
    <text>Save to Album</text>
  </view>
</view>

这里 id=myCanvas 的 canvas 就是我们需要绘制图片用的画布。

它的 CSS 属性如下：

#myCanvas {
   
   
  margin: 40rpx 0;
  width: calc(100% - 80rpx);
  height: 80%;
  box-shadow: 2px 2px 16px 4px rgba(0, 0, 0, 0.2);
}

CSS 属性	含义
margin: 40rpx 0;	设置元素上下的边距为40rpx（rpx是微信小程序中的响应式像素单位），左右边距为0
width: calc(100% - 80rpx);	将元素的宽度设置为其父容器宽度减去80rpx
height: 80%;	将元素的高度设置为其父容器高度的80%
box-shadow: 2px 2px 16px 4px rgba(0, 0, 0, 0.2);	给元素应用一个阴影效果，水平偏移量为2px，垂直偏移量为2px，模糊半径为16px，扩展半径为4px，颜色为rgba(0, 0, 0, 0.2)（表示稍微透明的黑色）

布局和样式都非常简单，难点是用 js 代码绘制图片，由于篇幅有限，这里只分享技术要点，完整版代码可参考 => pages/biases/share.js

获取 canvas 实例

const query = wx.createSelectorQuery()
query.select('#myCanvas')
  .fields({
   
    node: true, size: true })
  .exec(res => {
   
    
    //... 
  })

这段代码是微信小程序中使用 wx.createSelectorQuery 来选取ID为 myCanvas 的元素，并获取其节点信息和尺寸的示例代码。

具体解释如下：

• const query = wx.createSelectorQuery()： 创建一个选择器查询实例。
• query.select('#myCanvas')： 通过选择器 #myCanvas 选取ID为 myCanvas 的元素。
• .fields({ node: true, size: true })：指定要获取的字段，包括节点信息和尺寸信息。
• .exec(res => { ... })：执行查询操作，并在回调函数中处理查询结果。查询结果会作为参数 res 传递给回调函数。

然后我们可以根据实际需求，在回调函数中对获取的节点信息和尺寸进行处理，例如进行布局调整或其他操作。

其中 res 是一个数组，其中包含了查询结果的信息。

在执行 query.exec() 方法后，查询结果会作为一个数组传递给回调函数。数组的每个元素对应一个查询操作的结果，如果在 query.select() 中指定了多个选择器，那么数组中就会有多个元素。

每个元素都包含了指定字段的查询结果，可以通过索引来访问每个结果。例如，如果只有一个选择器查询的结果，可以通过 res[0] 来访问。

以上示例代码中，res 数组中只有一个元素，即 res[0]，该元素包含了 #myCanvas 元素的节点信息和尺寸信息。我们可以通过 res[0].node 来访问节点信息，通过 res[0].width 和 res[0].height 来访问宽度和高度的尺寸信息。

要注意，如果在 query.select() 中指定了多个选择器，那么数组中会有多个元素，每个元素对应一个选择器的查询结果。你可以根据自己的需求使用循环或条件语句来处理多个查询结果。

继续看代码，我们在 exec 的回调函数中，保存 canvas 和它的尺寸信息，因为后面会用到。