update example

.changes/clipboard-manager-image.md

@@ -3,4 +3,4 @@
 "clipboard-manager-js": "minor"
 ---
 
-Add support for `read_image` and `write_image` to the clipboard plugin.
+Add support for `read_image` and `write_image` to the clipboard plugin (desktop).

examples/api/src-tauri/capabilities/base.json

@@ -56,6 +56,8 @@
     "shell:allow-stdin-write",
     "clipboard-manager:allow-read-text",
     "clipboard-manager:allow-write-text",
+    "clipboard-manager:allow-read-image",
+    "clipboard-manager:allow-write-image",
     "fs:allow-rename",
     "fs:allow-mkdir",
     "fs:allow-remove",

examples/api/src/lib/utils.js

@@ -0,0 +1,11 @@
+export function arrayBufferToBase64(buffer, callback) {
+  const blob = new Blob([buffer], {
+    type: "application/octet-binary",
+  });
+  const reader = new FileReader();
+  reader.onload = function (evt) {
+    const dataurl = evt.target.result;
+    callback(dataurl.substr(dataurl.indexOf(",") + 1));
+  };
+  reader.readAsDataURL(blob);
+}

examples/api/src/views/Clipboard.svelte

@@ -1,23 +1,60 @@
 <script>
-  import { writeText, readText } from "@tauri-apps/plugin-clipboard-manager";
+  import * as clipboard from "@tauri-apps/plugin-clipboard-manager";
+  import { readFile } from "@tauri-apps/plugin-fs";
+  import { open } from "@tauri-apps/plugin-dialog";
+  import { arrayBufferToBase64 } from "../lib/utils";
 
   export let onMessage;
+  export let insecureRenderHtml;
   let text = "clipboard message";
 
-  function write() {
-    writeText(text)
+  function writeText() {
+    clipboard
+      .writeText(text)
       .then(() => {
         onMessage("Wrote to the clipboard");
       })
       .catch(onMessage);
   }
 
-  function read() {
-    readText()
+  async function writeImage() {
+    try {
+      const res = await open({
+        title: "Image to write to clipboard",
+        filters: [
+          {
+            name: "Clipboard IMG",
+            extensions: ["png", "jpg", "jpeg"],
+          },
+        ],
+      });
+      const image = await readFile(res.path);
+      await clipboard.writeImage(image);
+      onMessage("wrote image");
+    } catch (e) {
+      onMessage(e);
+    }
+  }
+
+  async function read() {
+    try {
+      const image = await clipboard.readImage();
+      arrayBufferToBase64(image, function (base64) {
+        const src = "data:image/png;base64," + base64;
+        insecureRenderHtml('<img src="' + src + '"></img>');
+      });
+      return;
+    } catch (_) {}
+
+    clipboard
+      .readText()
       .then((contents) => {
         onMessage(`Clipboard contents: ${contents}`);
       })
-      .catch(onMessage);
+      .catch((e) => {
+        console.error(e);
+        onMessage(e);
+      });
   }
 </script>
 
@@ -27,6 +64,8 @@
     placeholder="Text to write to the clipboard"
     bind:value={text}
   />
-  <button class="btn" type="button" on:click={write}>Write</button>
+  <button class="btn" type="button" on:click={writeText}>Write</button>
+  <button class="btn" type="button" on:click={writeImage}>Pick Image</button>
+
   <button class="btn" type="button" on:click={read}>Read</button>
 </div>

examples/api/src/views/FileSystem.svelte

@@ -1,6 +1,7 @@
 <script>
   import * as fs from "@tauri-apps/plugin-fs";
   import { convertFileSrc } from "@tauri-apps/api/core";
+  import { arrayBufferToBase64 } from "../lib/utils";
 
   export let onMessage;
   export let insecureRenderHtml;
@@ -20,18 +21,6 @@
     return dirSelect.value ? parseInt(dir.value) : null;
   }
 
-  function arrayBufferToBase64(buffer, callback) {
-    const blob = new Blob([buffer], {
-      type: "application/octet-binary",
-    });
-    const reader = new FileReader();
-    reader.onload = function (evt) {
-      const dataurl = evt.target.result;
-      callback(dataurl.substr(dataurl.indexOf(",") + 1));
-    };
-    reader.readAsDataURL(blob);
-  }
-
   const DirOptions = Object.keys(fs.BaseDirectory)
     .filter((key) => isNaN(parseInt(key)))
     .map((dir) => [dir, fs.BaseDirectory[dir]]);
@@ -215,7 +204,7 @@
       <button class="btn" on:click={stat}>Stat</button>
     </div>
   {/if}
-  
+
   <h3>Watch</h3>
 
   <input
@@ -225,7 +214,9 @@
   />
   <br />
   <div>
-    <label for="watch-debounce-delay">Debounce delay in milliseconds (`0` disables the debouncer)</label>
+    <label for="watch-debounce-delay"
+      >Debounce delay in milliseconds (`0` disables the debouncer)</label
+    >
     <input
       class="input"
       id="watch-debounce-delay"