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

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

一、方案

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

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

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

实现步骤

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

git 复制代码
git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter
  • 作为自定义组件引入,注意目录为第一步引入的代码所在目录
json 复制代码
"usingComponents":{
 "painter":"/components/painter/painter"
}
  • 组件接收 palette 字段作为画图数据的数据源, 图案数据以 json 形式存在,推荐使用"皮肤模板"的方法进行传递,示例代码如下:
js 复制代码
<painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

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

  • 数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因
ini 复制代码
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 复制代码
// 使用 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>

然后通过节点去生成对应的海报,性能更快

js 复制代码
// 获取图片数据
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
          })
        }
      })
    })
}

五、项目体验

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

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

相关推荐
li35741 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel1 天前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel1 天前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 天前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷1 天前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军1 天前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离1 天前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库