评论

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 下这个 代码片段 来接入使用吧~




最后一次编辑于  2023-09-06  
点赞 8
收藏
评论

20 个评论

  • 肖昌铭
    肖昌铭
    03-13

    实际使用当中,如果元素中有图片是从url加载的即使是本地路径,在手机上10次有9次渲染不出来

    03-13
    赞同 1
    回复
  • 大山
    大山
    2023-09-06

    考虑周到!赞赞赞!👍🏻。希望 webview 模式也可以支持一下。

    2023-09-06
    赞同 1
    回复 5
  • 芳芳
    芳芳
    05-28

    内容超出了一屏,怎么绘制长图呢?现在只能绘制出一部分页面

    05-28
    赞同
    回复
  • 顾小北
    顾小北
    04-15

    为什么使用了skyline,image标签加载图片,真机加载远程图片加载失败,但是开发者工具里是好的

    04-15
    赞同
    回复
  • 黎博
    黎博
    01-16

    这个 DEMO 走不通了,写相册需要补充隐私协议相关的东西

    "errMsg":"authorize:fail api scope is not declared in the privacy agreement"

    01-16
    赞同
    回复
  • k.
    k.
    2023-12-20

    一直有这个报错 基础库也是最高的 还是报错

    2023-12-20
    赞同
    回复
  • never
    never
    2023-12-07

    帮我也看看

    2023-12-07
    赞同
    回复
  • 村雨
    村雨
    2023-10-19

    难受,弄了半天 我的小程序是 webview渲染的

    2023-10-19
    赞同
    回复
  • 💮店長推薦.
    💮店長推薦.
    2023-10-17

    e.getNodeId is not a function

    2023-10-17
    赞同
    回复 1
    • 村雨
      村雨
      2023-10-19
      基础库要调高
      2023-10-19
      回复
  • 尼克
    尼克
    2023-09-14

    使用了您的代码片段,得到了这个效果,我想这应该是不正确的

    2023-09-14
    赞同
    回复

正在加载...

登录 后发表内容