add read_image api to ui.clipboard

nicegui/functions/clipboard.py

@@ -1,9 +1,12 @@
+import io
+from PIL import Image
+
 from .. import json
 from ..logging import log
 from .javascript import run_javascript
 
 
-async def read() -> str:
+async def read_text() -> str:
     """Read text from the clipboard.
 
     Note: This function only works in secure contexts (HTTPS or localhost).
@@ -21,7 +24,7 @@ async def read() -> str:
     return result or ''
 
 
-def write(text: str) -> None:
+def write_text(text: str) -> None:
     """Write text to the clipboard.
 
     Note: This function only works in secure contexts (HTTPS or localhost).
@@ -36,3 +39,32 @@ def write(text: str) -> None:
             console.error('Clipboard API is only available in secure contexts (HTTPS or localhost).')
         }}
     ''')
+
+
+async def read_image() -> Image.Image | None:
+    """
+    Read images from the clipboard.
+    Note: This function only works in secure contexts (HTTPS or localhost).
+    """
+    content = await run_javascript('''
+        if (navigator.clipboard) {
+            var items = await navigator.clipboard.read()
+            var images = []
+            for(var item of items){
+                if(item.types.length>0 && /^image/.test(item.types[0])){
+                    var blob = await item.getType(item.types[0])
+                    images.push(blob)
+                    break
+                }
+            }
+            //console.log(images)
+            return images
+        }
+        else {
+            console.error('Clipboard API is only available in secure contexts (HTTPS or localhost).')
+            return []
+        }
+    ''', timeout=5)
+    if content:
+        buffer = io.BytesIO(content[0])
+        return Image.open(buffer)

tests/test_clipboard.py

@@ -5,10 +5,10 @@
 def test_clipboard(screen: Screen):
     @ui.page('/')
     def page():
-        ui.button('Copy to clipboard', on_click=lambda: ui.clipboard.write('Hello, World!'))
+        ui.button('Copy to clipboard', on_click=lambda: ui.clipboard.write_text('Hello, World!'))
 
         async def read_clipboard():
-            ui.notify('Clipboard: ' + await ui.clipboard.read())
+            ui.notify('Clipboard: ' + await ui.clipboard.read_text())
         ui.button('Read from clipboard', on_click=read_clipboard)
 
     screen.open('/')

website/documentation/content/clipboard_documentation.py

@@ -4,7 +4,7 @@
 
 
 @doc.demo('Read and write to the clipboard', '''
-    The following demo shows how to use `ui.clipboard.read()` and `ui.clipboard.write()` to interact with the clipboard.
+    The following demo shows how to use `ui.clipboard.read_text()`, `ui.clipboard.write_text()` and `ui.clipboard.read_image()` to interact with the clipboard.
 
     Because auto-index page can be accessed by multiple browser tabs simultaneously, reading the clipboard is not supported on this page.
     This is only possible within page-builder functions decorated with `ui.page`, as shown in this demo.
@@ -15,22 +15,32 @@ def main_demo() -> None:
     # @ui.page('/')
     # async def index():
     with ui.column():  # HIDE
-        ui.button('Write', on_click=lambda: ui.clipboard.write('Hi!'))
+        ui.button('Write Text', on_click=lambda: ui.clipboard.write_text('Hi!'))
 
-        async def read() -> None:
-            ui.notify(await ui.clipboard.read())
-        ui.button('Read', on_click=read)
+        async def read_text() -> None:
+            ui.notify(await ui.clipboard.read_text())
+        ui.button('Read Text', on_click=read_text)
+
+        image = ui.image()
+
+        async def read_image() -> None:
+            img = ui.clipboard.read_image()
+            if not img:
+                ui.notify("you must copy an image to clipboard first.")
+            else:
+                image.set_source(img)
+        ui.button('Read Image', on_click=read_image)
 
 
 @doc.demo('Client-side clipboard', '''
     In order to avoid the round-trip to the server, you can also use the client-side clipboard API directly.
     This might be supported by more browsers because the clipboard access is directly triggered by a user action.
 ''')
 def client_side_clipboard() -> None:
-    ui.button('Write').on('click', js_handler='''
+    ui.button('Write Text').on('click', js_handler='''
         () => navigator.clipboard.writeText("Ho!")
     ''')
-    ui.button('Read').on('click', js_handler='''
+    ui.button('Read Text').on('click', js_handler='''
         async () => emitEvent("clipboard", await navigator.clipboard.readText())
     ''')
     ui.on('clipboard', lambda e: ui.notify(e.args))