is there way to get copied image to the clipboard in flutter web

Question

I am making web application where the user can copy images from their computer and when they want to send that image they can ctrl v on the text field to see the image their sending. I tried this using JS method call I guess it worked but now its giving a lot of problems for including JS on flutter so my question is there way to achieve this using only flutter.

Answer 1

You can copy the path of the image, then display it using the path copied since copy image directly is not that easy and well supported. (check this here).

Another option is to convert the image to Base64, then copy to clipboard and using the data to display the image.

In case it is required to copy the image directly, and you already have a JS function doing it, you can explore the interoperability between JS and Flutter Web using the js package. This article is a good start

---

To catch the event when the user presses hot key on his keyboard, check this article out. FocusableActionDetector is the widget we can use to detect the keyboard press, and map specific action to it. In this case it's copying the selected picture's path/ Base64 to clipboard.

Answer 2

You can use the pasteboard package:

final imageBytes = await Pasteboard.image;

Since version 0.1.1 it supports this method on the web client. But not the all types of images are supported, at least on the current version.