Copy image to clipboard

Dash Python
1

Hello!

I have some question:

Is it possible to copy png graph into windows clipboard without saving an image ?

2

Hi! I have this question too. I hope smb will help us.

3

This isn’t possible right now.

4

Thanks for the answer! I will look for another way, because i need a lot of png graphs for work, without an internet connection…

5

I think I’m understanding this issue wrong. I’m assuming that this question was about the “Save image as PNG” button in the graph’s toolbar. Clicking on this button will always download the image on the machine, it won’t copy it to the clipboard. Is this what you are referring too?

If you only need the PNG images, outside of the context of Dash, then you can use Orca to generate images of Plotly graphs: GitHub - plotly/orca: Command line application for generating static images of interactive plotly charts. However, that’s a separate issue!

1 Like
6

Does Ploty/Dash has any plan to support “Copy image to clipboard”? I believe it would be an useful feature for many users.

7

Yes, thank you for posting the question which I have too. Maybe someone can provide a bit more explantation into why one cannot copy an image or an ROI within in an image to the clipboard. My app goes to some great lengths to search for objects in an image and I really need to be able to copy and paste these ROIs. Thanks!

8

Seconded (thirded?). This would be a wonderful feature to have.

1 Like
9

I agree, it would be nice to be able to copy an image to the clipboard with dcc.Clipboard(). However, while copying text is widely supported by all the commonly used browsers, copying images is not. See Mozilla for more information on browser support for the clipboard API.

1 Like
10

Hello everyone,

I encountered the same issue and managed to come up with a solution that captures the base64 encoded image and allows for copying it to the clipboard.

Here’s the breakdown:

1. Capture the Base64 Image:

In my Dash callback, I create a plotly figure, convert it to a PNG image, and then encode this image to base64 format. And in my callback I store the encoded image in a dcc.Store .

pythonCopy code

@callback(
    # ... Other code ...

    # ... Inside the callback function ...
    image_bytes_io = figure.to_image(format="png", engine="kaleido")
    encoded_image = base64.b64encode(image_bytes_io).decode('utf-8')
    return (
        # ... Other returned data ...
        encoded_image
    )

Here, encoded_image contains the base64 encoded PNG representation of the figure.

2. Use the Base64 Image in a Clientside Callback:

I then use the base64 encoded image in a clientside callback to create an image, draw it on a canvas, and copy it to the clipboard.

javascriptCopy code

function(n_clicks, stored_image_data) {
    if (n_clicks) {
        const img = new Image();
        img.src = 'data:image/png;base64,' + stored_image_data;

        img.onload = function() {
            const canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            canvas.getContext('2d').drawImage(this, 0, 0);

            canvas.toBlob(function(blob) {
                const item = new ClipboardItem({'image/png': blob});
                navigator.clipboard.write([item]);
            });
        };

        return {'image': stored_image_data};
    }
    return {};
}

This function creates an image from the base64 data and draws it on a canvas. The canvas content is then converted to a blob and copied to the clipboard using the Clipboard API.

I hope this helps anyone facing similar challenges. Feel free to reach out if you have any questions or if there are ways to further optimize this solution.

2 Likes