Copy image to clipboard

Using Streamlit
1

I can copy text to clipboard, but how about images?
E.g., a have an app generating an image to be used in another app. To quickly transfer that image I would use the clipboard. I can not copy from the context menu because the shown image is a thumbnail. I plan to deploy the app.

I know that pyperclip can copy images on Windows, but it should be cross platform and work when deployed.

Btw the discord invite on the top of the page is invalid :slight_smile:

2

This currently appears to be working, but the button now is out of place. It would be nice if I can use the st.button.

        data = f"new Uint8Array({list(data)});"
        html(
            """
            <button id="copyButton">📋</button>
            <script>
            function toClipboard() {
                const image = """ + data + """;
                const blob = new Blob([ image ], { type : "image/png" });
                const data = [new ClipboardItem({ [blob.type]: blob })];
                navigator.clipboard.write(data).then(function() {
                    console.log('Async: Copying to clipboard was successful!');
                }, function(err) {
                    console.error('Async: Could not copy text: ', err);
                })
            }
            document.getElementById("copyButton").onclick = toClipboard;
            </script>
            """
        )