If you copy an image and paste it with control-v or with the context menu when you enter text in mobile browsers, then the paste event is called on the document.

clipboardData or originalEvent.clipboardData on the event contains an array of clipboard item that you can iterate over and, if the kind property is file on the item, you can use getAsFile() on the item.

You can pass the result of getAsFile() to a new FileReader() via readAsDataURL(), and once its load event has fired the image, as a base64 image, will be available on the target.result event property.

document.addEventListener("paste", ev => {
  var items = (ev.clipboardData || ev.originalEvent.clipboardData).items;
  [...items].forEach(item => {
    if (item.kind == "file") {
      var reader = new FileReader()
      reader.onload = ev => {
        // ev.target.result as the base64 image
      }
      reader.readAsDataURL(item.getAsFile())
    }
  })
})

This doesn't work on the iPhone--you need to add the app as a link to the homescreen and add some meta tags if you want a full screen experience.

First check if webkitRequestFullscreen() exists on your DOM element, then call that function for fullscreen.

if (document.documentElement.webkitRequestFullscreen)
  document.documentElement.webkitRequestFullscreen()

And do the same when you want to issue webkitExitFullscreen()

If you want to check if fullscreen is current active check (===) for null on document.webkitFullscreenElement.

Omit the webkit part of the names for the standards compliant version. Safari, of course, requires you to use the webkit prefix.

First get the permission from (Firefox doesn't implement this currently...) to read from the browser clipboard (i.e. things copied from the desktop won't be pasted).

var permission = await navigator.permissions.query({ name: 'clipboard-read' })

Then check it

if (permission.state === 'denied') {
  alert('Not allowed to read clipboard.')
  return null
}

Then read it

var clipboardContents = await navigator.clipboard.read()

Then look at all the types that are associated with this item, looking for something that contains image, and return it if it's an image with its type, otherwise look at the rest of the items.

 for (const item of clipboardContents) {
   var types = [...item.types].filter(i => i.includes("image"))
   if (types.length != 0) return [item, types[0]]
 }
 alert("No image to paste")
 return null

In full

// returns [image, type]
// returns null on no permission or no image data
async function get_image_type() {
  var permission = await navigator.permissions.query({ name: 'clipboard-read' })
  if (permission.state === 'denied') {
    alert('Not allowed to read clipboard.')
    return null
  }
  const clipboardContents = await navigator.clipboard.read()
  for (const item of clipboardContents) {
    var types = [...item.types].filter(i => i.includes("image"))
    if (types.length == 0) return [item, types[0]]
  }
  console.log("No image data")
  return null
}

With the image you can use it as a blob and use it with item.getType(type) and FileReader().readAsDataURL(), i.e.

var blob = await item.getType(type)
var reader = new FileReader()
reader.onload = ev => {
  ev.target.result // the blob url
}
reader.readAsDataURL(blob)

window.addEventListener("DOMContentLoaded", function() {
  alert("hi")
})

I always forget the name DOMContentLoaded. The function runs when the DOM is parsed and deferred scripts are downloaded and executed.