【小程序】如何简单生成海报，全新组件一个就好

在营销推广场景下，用户在 小程序生成海报 并且分享给其他用户是有效的推广方式之一。通过海报导出及分享的链路，用户能够快捷分享自己喜欢的产品和服务，交互流程更丝滑；同时其他用户能够通过一张海报快速了解产品特点并且直接扫码进入对应产品页面，完成业务推广闭环。

一、方案

当前小程序导出海报的方式主要是 canvas 绘制与服务端绘制 2 种方式，然而这两种方式各有优劣，无法完全满足开发者高效开发、调试方便的需求。

二、Painter 小程序生成图片库，轻松通过 json 方式生成

原理：底层原理也是封装canvas，通过 json 方式生成对应的海报

实现步骤：

• 引入代码包 Painter 的核心代码在另一个 repo 中，github.com/Kujiale-Mob… 。

你可以通过 submodule 的方式进行库的引入。有关 submodule 的用法可自行 Google。

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter

• 作为自定义组件引入，注意目录为第一步引入的代码所在目录

"usingComponents":{
 "painter":"/components/painter/painter"
}

• 组件接收 palette 字段作为画图数据的数据源, 图案数据以 json 形式存在，推荐使用“皮肤模板”的方法进行传递，示例代码如下：

<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

有时候我生成的图片过于模糊可以通过生成比例参数：scaleRatio去放大，但是对应也会生成时间更久了

• 数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因

bind:imgOK="onImgOK"
bind:imgErr="onImgErr"

onImgOK(e) {
  其中 e.detail.path 为生成的海报路径
},

三、通过snapshot 组件生成

为了满足小程序高效生成海报的需求，Skyline 渲染引擎推出 snapshot 组件 ，快速解决复杂排版、超长海报等绘制难题。

1. snapshot 组件能力

对比现有的 canvas 绘制与服务端绘制的方式，snapshot 组件 具有明显优势：

• 轻松应对复杂排版，如圆角、百分比、自定义字体等样式均可轻松调整
• 没有宽高限制，支持超长海报的输出
• 调用方式简单，直接使用 wxml 实现

因此，通过 snapshot 组件完成小程序生成海报并保存本地的完整过程也非常简单便捷：

2. snapshot 开发流程

1. 使用 wxml 绘制海报内容
2. 使用 snapshot 组件包裹海报的 wxml
3. 调用 takeSnapshot 获取图片数据
4. 调用 fs.writeFileSync 将海报数据写入本地文件
5. 调用 wx.saveImageToPhotosAlbum 将海报保存到本地

// 使用 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>

// 用 snapshot 组件包裹海报的 wxml
<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
          })
        }
      })
    })
}

五、项目体验

「小日常桑」 是一款习惯养成追踪的工具类小程序。

• 不紧不慢，向上生长
• 大大的梦想也需要分解成每一个小日常的努力