Paste callback to get images You can take advantage of the cntrl p keys easy to let users paste content into your page This example will specifically focus on images but is applicable to any format type document onpaste function e console log e console log select screen output and paste something document onpaste function e console log e var items e clipboardData e originalEvent clipboardData items console log items console log select screen output and paste something If you want to see more details mime types then you ll need to do this document onpaste function e console log e var items e clipboardData e originalEvent clipboardData items console log JSON stringify items will give you the mime types console log items 0 for let key in items 0 console log key console log select screen output and paste something document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i console log items i type console log select screen output and paste something document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i for let key in items i console log key items i key console log select screen output and paste something document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes image continue looking for image png image jpg if items i kind file continue var blob items i getAsFile console log blob blob var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA reader readAsDataURL blob console log select screen output and paste something document body style height 150px document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes image continue looking for image png image jpg if items i kind file continue var blob items i getAsFile console log blob blob var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA console log reader onloade let img document createElement img document body appendChild img img src event target result reader readAsDataURL blob console log select screen output and paste something Hacky fix some images like animated gif can t be copied and pasted via the clipboard however you can copy the url which can be used to download the image Copy and paste gif image via clipboard workaround Copy image address when you right click on an image using the web browser document body style height 150px document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes text continue looking for text plain if items i kind string continue console log type items i type console log kind items i kind let s items i getAsString function url console log url url url https usabilitygeek com wp content uploads 2020 06 06 microwave gif fetch url then response response blob then function myBlob var objectURL URL createObjectURL myBlob console log objectURL objectURL objectURL blob https notebook xbdev net f225c6d0 35df 4b72 b23b db59890d222a let img document createElement img document body appendChild img img src objectURL var reader new FileReader reader onload function event console log reader onloade look something like this data image gif base64 R0lGODlh4AHgAfeOAAECBQkLEhE console log res event target result let json JSON stringify event target result console log res json substring 0 50 let img document createElement img document body appendChild img img src event target result reader readAsDataURL myBlob console log select screen output and paste something
tAsFile console log blob blob var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA console log reader onloade let img document createElement img document body appendChild img img src event target result reader readAsDataURL blob console log select screen output and paste something Hacky fix some images like animated gif can t be copied and pasted via the clipboard however you can copy the url which can be used to download the image Copy and paste gif image via clipboard workaround Copy image address when you right click on an image using the web browser document body style height 150px document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes text continue looking for text plain if items i kind string continue console log type items i type console log kind items i kind let s items i getAsString function url console log url url url https usabilitygeek com wp content uploads 2020 06 06 microwave gif fetch url then response response blob then function myBlob var objectURL URL createObjectURL myBlob console log objectURL objectURL objectURL blob https notebook xbdev net f225c6d0 35df 4b72 b23b db59890d222a let img document createElement img document body appendChild img img src objectURL var reader new FileReader reader onload function event console log reader onloade look something like this data image gif base64 R0lGODlh4AHgAfeOAAECBQkLEhE console log res event target result let json JSON stringify event target result console log res json substring 0 50 let img document createElement img document body appendChild img img src event target result reader readAsDataURL myBlob console log select screen output and paste something