feat(clipboard): support readImage & writeImage (#845)

* feat(clipboard): support `read_image` & `write_image`

* fix plugin name

* platform specific bahavior

* remove unnecessary BufWriter

* improvement

* update example

* update example

* format

* header, fix change file

* use image from tauri

* fix ci

* update tauri, fix read

* image crate only on desktop [skip ci]

* Update plugins/authenticator/src/u2f_crate/protocol.rs [skip ci]

Co-authored-by: Amr Bashir <amr.bashir2015@gmail.com>

* Update plugins/authenticator/src/u2f_crate/protocol.rs [skip ci]

Co-authored-by: Amr Bashir <amr.bashir2015@gmail.com>

* update deps, address code review

* fix mobile [skip ci]

---------

Co-authored-by: Lucas Nogueira <lucas@tauri.studio>
Co-authored-by: Lucas Nogueira <lucas@tauri.app>
Co-authored-by: Amr Bashir <amr.bashir2015@gmail.com>

examples/api/src/lib/utils.js

@@ -0,0 +1,15 @@
+// Copyright 2019-2023 Tauri Programme within The Commons Conservancy
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-License-Identifier: MIT
+
+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,59 @@
 <script>
-  import { writeText, readText } from "@tauri-apps/plugin-clipboard-manager";
+  import * as clipboard from "@tauri-apps/plugin-clipboard-manager";
+  import { open } from "@tauri-apps/plugin-dialog";
+  import { arrayBufferToBase64 } from "../lib/utils";
+  import { readFile } from "@tauri-apps/plugin-fs";
 
   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 bytes = await readFile(res.path);
+      await clipboard.writeImage(bytes);
+      onMessage("wrote image");
+    } catch (e) {
+      onMessage(e);
+    }
+  }
+
+  async function read() {
+    try {
+      const image = await clipboard.readImage();
+      arrayBufferToBase64(await image.rgba(), 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) => {
+        onMessage(e);
+      });
   }
 </script>
 
@@ -27,6 +63,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"