2023 年国庆节就要到了，有粉丝问到今年是否可以出一款国庆头像生成小程序。

于是想到用微信新渲染引擎 skyline的新 API：Snapshot截图能力来完成

文档：https://developers.weixin.qq.com/miniprogram/dev/api/skyline/Snapshot.html

完成后，发现真的非常丝滑，它的原理就是先用<snapshot id="target">...</snapshot>将需要截图的区域包括起来，然后定义一个 ID， 接下来在脚本里通过createSelectorQuery()获取。

this.createSelectorQuery().select("#target")
      .node().exec(res => {
        const node = res[0].node
        node.takeSnapshot({
          // type: 'file' 且 format: 'png' 时，可直接导出成临时文件
          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')
            。。
          },
          fail(res) {
            console.log("takeSnapshot fail:", res)
          }
        })
      })

比比小程序对选择器进行了封装，可搜索核心代码进行学习（全部代码见源码）：

getSelectorNodeInfo('#target').then((res) => {
			console.log('res', res)
			const node = res[0].node
			node.takeSnapshot({
				type: 'arraybuffer',
				format: 'png',
				success: (res:any) => {
					const savePath = `${wx.env.USER_DATA_PATH}/hello.png`
					const fs = wx.getFileSystemManager();
					fs.writeFileSync(savePath, res.data, 'binary'); //图片保存至本地
					wx.showShareImageMenu({ //唤起分享图片的界面
						path: savePath
					})
				},
				fail(res) { }
			})
		})

在此项目中也可以借鉴一下微信隐私弹窗的交互

因为此项目仅用了1个小时完成，实在是没有太多的难点，主要是让大家对新的渲染引擎有一个全新的认识。

项目对skyline和webView都做了布局兼容，对于新手学习skyline是个不错的demo。

也可以看看我用 skyline搭建的第一个小程序：

比比轻壁纸：https://developers.weixin.qq.com/community/minihome/article/doc/0004ce2acf8020ac32af1ed5f51813

-----

附上源码（uniapp+vue3+ts）和 demo:

https://github.com/shiheme/skyline-wx-avatar

https://gitee.com/h5gallery/skyline-wx-avatar

喜欢的给个star、点赞、留个评论，谢谢。

喜欢小程序开发的也可以加我微信或者关注我的公众号（github/gitee里扫码）一起学习成长。