add element takeSnapshot 截屏示例页面

pages.json

@@ -965,8 +965,16 @@
         "navigationBarTitleText": "sticky-header",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path" : "pages/API/element-takesnapshot/element-takesnapshot",
+      "style" :
+      {
+        "navigationBarTitleText" : "",
+        "enablePullDownRefresh" : false
+      }
     }
-    
+
   ],
   "globalStyle": {
     "pageOrientation": "portrait",
@@ -1017,4 +1025,4 @@
       "query": "" //启动参数，在页面的onLoad函数里面得到
     }]
   }
-}
\ No newline at end of file
+}

pages/API/element-takesnapshot/element-takesnapshot.uvue

+<template>
+  <view>
+    <page-head id="page-head" title="getElementById"></page-head>
+    <view class="uni-padding-wrap" id="snapshot-content">
+      <text id="text">this is text</text>
+      <view id="view" class="uni-common-mt" style="border: 1px solid red"
+        >this is view</view
+      >
+      <button class="uni-btn" @click="changeViewStyle">
+        修改 view 宽高及背景色
+      </button>
+
+      <button class="uni-btn" type="primary" @click="takeSnapshotClick">
+        点击截图
+      </button>
+    </view>
+    <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit"></image>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      snapImage:"/static/uni.png"
+    }
+  },
+  methods: {
+
+    changeViewStyle(){
+      const text = uni.getElementById('text')!
+      text.style.setProperty('color', 'red')
+
+      const view = uni.getElementById('view')!
+      view.style.setProperty('width', '90%')
+      view.style.setProperty('height', '50px')
+      view.style.setProperty('backgroundColor', '#007AFF')
+    },
+    takeSnapshotClick(){
+      const view = uni.getElementById('snapshot-content')!
+      view.takeSnapshot({
+        success:function(res:TakeSnapshotSuccess){
+          console.log(res.tempFilePath)
+          this.snapImage = res.tempFilePath
+          uni.showToast({
+            title:'截图成功'
+          })
+        },
+        fail:function(res:TakeSnapshotFail){
+          console.log(res)
+          uni.showToast({
+            icon:'error',
+            title:'截图失败'
+          })
+        }
+      } as TakeSnapshotOptions)
+    }
+  }
+}
+</script>

pages/tabBar/API.uvue

@@ -146,6 +146,11 @@
                 name: 'element元素',
                 url: 'get-element-by-id',
                 api: ["getElementById"]
+              },
+              {
+                name: 'element截图',
+                url: 'element-takesnapshot',
+                api: ["takeSnapshot"]
               },
               {
                 name: 'node节点',