Skyline | 快速搞定复杂的分享海报

在小程序中生成海报是一种非常有效的推广方式

用户可以使用小程序的过程中生成小程序海报并分享给他人

通过海报的形式，用户可以直观地了解产品或服务的特点和优势

常见绘制海报方式

目前，小程序海报有两种常见的实现方式：

· canvas 绘制海报

· 服务端绘制海报

这两种方式各有千秋

canvas 绘制海报

使用 canvas 绘制海报主要有以下几个步骤

1、创建 canvasContext

2、获取网络图片的本地路径

3、绘制图片、文字等到 canvas

4、调用 wx.canvasToTempFilePath 导出图片

尽管 canvas 绘制功能强大，但实际使用中，这些操作看似简单，但调试起来却比较麻烦

而且面对一些复杂的排版时，使用 canvas 绘制相较于使用 CSS 绘制来说困难许多

除此之外，canvas 的宽高有最大限制，超出限制则会绘制空白

服务端绘制

小程序也可以通过调用服务端接口，将需要生成海报的数据传递给服务端，

由服务端使用 Canvas API 等第三方库来生成图片。

然而，这种绘制方式需要走网络请求，如果量大会给服务器带来一定的成本压力。

此外，对于复杂排版的实现，使用 Canvas 绘制也有一定的难度。

尽管小程序海报虽然好用，但是当遇到要求比较高的设计稿需要还原海报时，对小程序开发者来说是一个十分让人头疼的问题

考虑到海报在小程序中使用的广泛性，我们把开发者的烦恼交给官方来处理～

小程序官方推出了 snapshot 组件，可以直接将小程序 wxml 导出图片。

snapshot 生成海报

当使用 canvas 或 服务端绘制海报遇到复杂排版时，如 圆角、百分比、自定义字体 等等，实现比较困难。

但是使用 wxml 实现却很简单 👇 下面的例子我们使用 wxml 实现海报

<view class="snapshot-box">
	<view class="poster-container">
		<view class="poster-header">
			<image />
			...
		</view>

		<view class="description">
			...
		</view>
		
		<view class="footer">
			...
		</view>
	</view>
</view>

接着，我们就可以导出海报啦，使用非常简单：

1、用 snapshot 组件包裹海报的 wxml

2、调用 takeSnapshot 获取图片数据

3、调用 fs.writeFileSync 将海报数据写入本地文件

4、调用 wx.saveImageToPhotosAlbum 将海报保存到本地

<snapshot id="view">
  <!-- 这里是要海报的 wxml -->
</snapshot>

<button bindtap="tap">保存海报</button>

tap() {
  this.createSelectorQuery().select("#view")
    .node().exec(res => {
      const node = res[0].node
      
      // 保存海报
      node.takeSnapshot({
        type: 'arraybuffer',
        format: 'png',
        success: (res) => {
          const f = `${wx.env.USER_DATA_PATH}/hello.png`
          const fs = wx.getFileSystemManager();
          
          // 将海报数据写入本地文件
          fs.writeFileSync(f, res.data, 'binary')
          this.setData({
            img: f
          })
          
          // 把海报图片保存到本地
          wx.saveImageToPhotosAlbum({
            filePath: f
          })
        }
      })
    })
}

最后我们来看看使用 snapshot 组件生成海报的效果吧～

除了普通尺寸分享海报之外，对于 canvas 无法搞定的超长海报，snapshot 后续也会支持超长海报的导出～

你的小程序也有海报生成需求吗？

赶紧 mark 下这个 代码片段 来接入使用吧～