Get browser generated dragged translucent image

See more:

Javascript

HTML5

I want to get the image that browser generates when we drag an element. Here is the simple example why I want to do this.

https://i.stack.imgur.com/dt4ZG.png[^]

In the above image the two videos placed inside the black div like picture-in-picture. The black div is able to drag & drop. When I drag the black div the browser generates the draggable translucent image like in above picture.

In code implementation I am using dataTransfer setData & getData method to access dragged image. When I drop image and use dataTransfer.getData gives the dragged div ID and having only black background. I need the actual dragged image to store in state in the form of URL to use in application.

How can I do this without using any external libraries? I know the HTML2Canvas library generates screenshots like browser do. But is there any way to use/store browsers dragged image?

Thank you!

What I have tried:

Demo example: https://codepen.io/AkshayPatil_/pen/oNoPNQE[^]