• 微信小程序Snapshot导出海报

    开启skyline

    app.json

    "lazyCodeLoading": "requiredComponents",
  "renderer": "skyline",
  "componentFramework": "glass-easel",
  "rendererOptions": {
    "skyline": {
      "defaultDisplayBlock": true
    }
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    设置版本库

    设置版本库>=3.0.1
    在这里插入图片描述

    编写代码

    index.wxml

    <snapshot id="view" class="intro">
  <view class="snapshot-box">
	<view class="poster-container">
		<view class="poster-header">
			<image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" />
			<view class="poster-header-text">
				<text>binnietext>
				<text>发起 Skyline 学习活动text>
			view>
		view>

		<view class="description">
			<view class="schedule-text">
				<view>学 习 进 度view>
				<view class="detail">80%view>
			view>
			<view class="schedule">
				<view class="schedule-all">
					<view class="schedule-real">view>
				view>
			view>
			<view class="members">
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/g8_iWdQLmR5dKwrKW-c1fRZc7XRYP6z_rp1f-BDMmQ41BOjsDigYKkO6VQqj6aZoyVKUtTuJEEvOJuv3av8U2Q" />
					<view class="leader">队长view>
				view>
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjiOstqoOZHQgfWzWpJiK02jKt6i5HBHWD3IUpgMSneSW5_26oHaJLddq-h6A3wEI_A" />
					<view>
						<text>binnnnnnntext>
					view>
				view>
				<view class="member">
					<image class="head-img" src="https://res.wx.qq.com/op_res/v9cRw50kNOp93AQJWHjbjl-OdWB18klNWCsWqEECTnxAvN-_EaCkgGXNjwANvi4_gIM3MrAHHZiGBK1ooFzmyg" />
					<view>🚜拖view>
				view>
			view>
		view>

		<view class="line">
			<view class="left-line">view>
			<view class="real-line">view>
			<view class="right-line">view>
		view>
		
		<view class="footer">
			<view class="qrcode">
				<image mode="aspectFill" src="https://res.wx.qq.com/wxdoc/dist/assets/img/skyline-demo.37eff20b.png">image>				
			view>
			<view class="qrcode">
				<text>长按识别小程序码来一起学习吧text>
			view>
		view>
	view>
  view>
snapshot>

<button type="primary" bindtap="tap">保存海报到本地button>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    wxss

    @font-face {
  font-family: "test";
  src: url("https://wximg.qq.com/cityservices/font/FZFWQingYinTiJWD.TTF");
}
.intro {
  margin: 90px 30px 30px;
  text-align: center;
}
.snapshot-box {
  font-family: "test";
  padding: 20px 16px;
  background: url(https://res.wx.qq.com/op_res/tOwqPm31NVc7GmNdujMfgpUebQbZeRW4YD79TYkVfJsoJX4cDuQwVWygj-bviemXbUFoMGM9c_7q7-2RT071Vw) 30%;
}
.poster-img {
  width: 100%;
}
.poster-container {
  background: linear-gradient(#229156, #2fce7c);
  padding: 20px 16px;
  border-radius: 10px;
}
.poster-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.poster-header-text {
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  font-weight: bold;
  padding-left: 10px;
  text-align: left;
}
.head-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.description {
  margin: 20px 0;
  padding: 20px 0;
  background-color: #fff;
  border-radius: 10px;
}
.schedule-text {
  font-size: 20px;
  font-weight: bold;
}
.schedule-text .detail{
  font-size: 30px;
  font-weight: 500;
  margin: 10px 0;
}
.schedule {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  display: flex;
  position: relative;
}
.schedule-all {
  width: 90%;
  height: 14px;
  background-color: #eeeeee;
  border-radius: 20px;
}
.schedule-real {
  position: absolute;
  width: 80%;
  height: 14px;
  background: linear-gradient(90deg, #2fce7c, #229156);
  border-radius: 20px;

}
.members {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.member {
  margin: 10px;
}
.member view {
  width: 48px;
  background-color: #c5ebdd;
  color: #07c160;
  border-radius: 20px;
  margin-top: -8px;
  font-size: 12px;
  line-height: 1.6;
  padding: 0 6px;
}
.member view text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.member .leader {
  background-color: #07c160;
  color: #fff;
}
.snapshot-footer {
  display: flex;
}
.snapshot-footer-desc {
  flex: 1;
  text-align: left;
  padding-left: 10px;
}

.line {
  display: flex;
  flex-direction: row;
  margin-left: -16px;
  margin-right: -16px;
}
.real-line {
  width: 90%;
  border-bottom: solid 3px rgba(255, 255, 255, 0.1);
  margin: 0 10px 10px 10px;
}
.left-line {
  width: 10px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 0 10px 10px 0; 
}
.right-line {
  width: 10px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px 0 0 10px; 
}

.qrcode {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.qrcode image{
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.qrcode text {
  font-size: 10px;
  color: #fff;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149

    index.js

    const app = getApp()

Page({
  data: {

  },
  onLoad() {
    console.log('代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。可点击以下链接查看代码片段的详细文档：')
    console.log('https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html')
    wx.loadFontFace({
      family: "Monaco",
      source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")',
      scopes: ['webview', 'native'],
      success: (res) => {
          console.log('success', res.status)
          this.render()
      },
      fail: function (res) {
          console.error(res)
      },
      complete(res) {
        console.log('111', res)
      }
    });
  },

  tap() {
    wx.loadFontFace({
      family: "Monaco",
      source: 'url("https://fonts.cdnfonts.com/s/14106/Monaco.woff")',
      scopes: ['webview', 'native'],
      success: (res) => {
          console.log('success', res.status)
          this.render()
      },
      fail: function (res) {
          console.error(res)
      },
      complete(res) {
        console.log('111', res)
      }
    });
    let isCanUse= wx.canIUse('Snapshot.takeSnapshot');//基础库 3.0.1 开始支持
    if(!isCanUse){
      console.log("不可以使用");
      return;
    }
    this.createSelectorQuery().select("#view")
      .node().exec(res => {
        console.log(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')
            wx.showToast({
              title: '保存成功'
            })

            wx.saveImageToPhotosAlbum({
              filePath: f,
              complete(res) {
                console.log("saveImageToPhotosAlbum:", res)
              }
            })
          },
          fail(res) {
            console.log("takeSnapshot fail:", res)
          }
        })
      })
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77

    测试

    在这里插入图片描述
    点击保存海报
    在这里插入图片描述
    导出结果
    在这里插入图片描述

    总结

    使用skyline的snapshot导出将小程序页面直接导出为图片，大大节省了服务器端的压力，而且样式前端可控，就是需要开启skyline，如果是老项目的话需要webview升级skyline

  • 相关阅读:
    Redis的数据结构分析
    Linux虚拟服务器-LVS-集群技术
    百度地图实现 区域高亮
    导图解文 从梦想到财富（41）比起熬夜加班，创业更需要赢在起点
    计算机网络学习实践：模拟静态路由
    1224. 最大相等频率（数组）
    基于BP神经网络算法的实现静态图片和视频人脸识别、性别识别
    【NeurIPS 2023】Backdoor对抗攻防论文汇总
    积性函数学习&做题
    Power Apps-窗体行为公式
  • 原文地址：https://blog.csdn.net/qq_36437991/article/details/132907713