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

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

一、方案

当前小程序导出海报的方式主要是 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
          })
        }
      })
    })
}

五、项目体验

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

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

相关推荐
peachSoda735 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH1 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿2 小时前
React Native Vector Icons 安装指南
前端·react native
国家不保护废物2 小时前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js