Skip to content

Instantly share code, notes, and snippets.

@VehpuS
Last active October 4, 2019 12:50
Show Gist options
  • Save VehpuS/60dc8bc9000a9260a64864dd4eaf48ac to your computer and use it in GitHub Desktop.
Save VehpuS/60dc8bc9000a9260a64864dd4eaf48ac to your computer and use it in GitHub Desktop.
Create an html element that allows pasting images to a webpage. Fiddle running the example code: https://jsfiddle.net/9unkzh0q/
document.getElementById('pasteArea').onpaste = function (event) {
console.log(event);
// use event.originalEvent.clipboard for newer chrome versions
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
JSON.stringify(items)
// find pasted image among pasted items
var blob = null;
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") === 0) {
blob = items[i].getAsFile();
}
}
// load image if there is a pasted image
if (blob !== null) {
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById("pastedImage").src = event.target.result;
document.getElementById("targetArea").value = "![" + event.timeStamp + "](" + event.target.result + ")";
event.target.value = event.target.result;
};
reader.readAsDataURL(blob);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment