<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);
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.