小程序生成海报，全新组件一个就好

微信开发者 · 发表于 2023-9-14 17:34:54

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

海报内容通常包含产品简介、产品介绍 path 等信息

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

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

snapshot 组件能力

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

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

snapshot 组件生成海报并保存本地

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

使用 wxml 绘制海报内容
使用 snapshot 组件包裹海报的 wxml
调用 takeSnapshot 获取图片数据
调用 fs.writeFileSync 将海报数据写入本地文件
调用 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          })        }      })    })}

小程序生成海报是重要的营销推广方式之一。当前开发者主要使用 canvas 绘制与服务端绘制 2 种海报绘制方式，但这 2 种方式存在调试不便等不足。

Skyline 渲染引擎最新上线的 snapshot 组件 助力开发者轻松应对复杂排版，满足更多营销场景需求，欢迎各位开发者接入代码片段（仅支持 PC 端浏览器打开），开启高效开发之旅！

如有 Skyline 渲染引擎相关问题，可在 Skyline 社区专区发帖互动，技术专员将为大家解答及进行深度交流。

		记住	找回密码
密码			加入慢享