feat: 截图功能验证。

截图需要 700 ms，转换成 webp 3 s。

src/App.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import { invoke } from "@tauri-apps/api/tauri";
+import "./App.css";
+
+function App() {
+  const [greetMsg, setGreetMsg] = useState("");
+  const [name, setName] = useState("");
+  const [screenshots, setScreenshots] = useState<string[]>([]);
+
+  async function greet() {
+    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+    setGreetMsg(await invoke("greet", { name }));
+  }
+
+  async function takeSnapshot() {
+    const base64Text = await invoke("take_snapshot");
+    
+    setScreenshots([`data:image/webp;base64,${base64Text}`]);
+  }
+
+  return (
+    <div className="container">
+      <h1>Welcome to Tauri!</h1>
+
+      <div className="row">
+        <a href="https://vitejs.dev" target="_blank">
+          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
+        </a>
+        <a href="https://tauri.app" target="_blank">
+          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
+        </a>
+        <a href="https://reactjs.org" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+
+      <div className='row'>
+        <img src={screenshots[0]} />
+      </div>
+
+      <p>Click on the Tauri, Vite, and React logos to learn more.</p>
+
+      <div className="row">
+        <div>
+          <input
+            id="greet-input"
+            onChange={(e) => setName(e.currentTarget.value)}
+            placeholder="Enter a name..."
+          />
+          <button type="button" onClick={() => takeSnapshot()}>
+            Take Snapshot
+          </button>
+        </div>
+      </div>
+      <p>{greetMsg}</p>
+    </div>
+  );
+}
+
+export default App;