<h1>Paste Image from Clipboard</h1>
<p>Copy an image to the clipboard and paste it here:</p>
<div id="image-container"></div>
const imageContainer = document.getElementById("image-container");

// Listen for a paste event
document.addEventListener("paste", function (e) {
  // Get the clipboard data
  const items = e.clipboardData.items;
  console.log(e.clipboardData.items);

  // Loop through all items and look for image data
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") !== -1) {
      // Convert the image to a base64 string
      const blob = items[i].getAsFile();
      const reader = new FileReader();
      reader.onload = function (event) {
        const base64 = event.target.result;
        // Create an image element and set its source to the base64 string
        const img = document.createElement("img");
        img.src = base64;
        // Add the image to the image container
        imageContainer.appendChild(img);
      };
      reader.readAsDataURL(blob);
    }
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.