From cfe1a2d572366c376d3f8ef3691ea249e4e4b6e7 Mon Sep 17 00:00:00 2001
From: duqingquan <duqingquan@dcloud.io>
Date: Mon, 16 Oct 2023 20:31:04 +0800
Subject: [PATCH] =?UTF-8?q?add=20element=20takeSnapshot=20=E6=88=AA?=
 =?UTF-8?q?=E5=B1=8F=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    | 12 +++-
 .../element-takesnapshot.uvue                 | 60 +++++++++++++++++++
 pages/tabBar/API.uvue                         |  5 ++
 3 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 pages/API/element-takesnapshot/element-takesnapshot.uvue

diff --git a/pages.json b/pages.json
index a2ae57d2..606fe3a7 100644
--- a/pages.json
+++ b/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
+}
diff --git a/pages/API/element-takesnapshot/element-takesnapshot.uvue b/pages/API/element-takesnapshot/element-takesnapshot.uvue
new file mode 100644
index 00000000..742b85d2
--- /dev/null
+++ b/pages/API/element-takesnapshot/element-takesnapshot.uvue
@@ -0,0 +1,60 @@
+<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>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index c31a1e53..7e5adfca 100644
--- a/pages/tabBar/API.uvue
+++ b/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节点',
-- 
GitLab