89 lines
2.2 KiB
HTML
89 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Paste Image Demo</title>
|
|
<style>
|
|
#dropZone {
|
|
background-color: #ccc;
|
|
min-width: 10em;
|
|
min-height: 10em;
|
|
border: 2px dashed #888;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: #888;
|
|
}
|
|
|
|
#data_url_bin {
|
|
cursor: pointer;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
|
|
</style>
|
|
<script type="module">
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const dropZone = document.getElementById('dropZone');
|
|
|
|
const data_url_bin = document.getElementById('data_url_bin');
|
|
document.addEventListener('paste', async (event) => {
|
|
const items = event.clipboardData.items;
|
|
for (let item of items) {
|
|
if (item.type.indexOf("image") !== -1) {
|
|
const blob = item.getAsFile();
|
|
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(blob);
|
|
reader.addEventListener('load', ({ target }) => {
|
|
data_url_bin.innerText = target.result;
|
|
});
|
|
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
const img = new Image();
|
|
img.src = url;
|
|
dropZone.innerHTML = '';
|
|
dropZone.appendChild(img);
|
|
//console.log("Pasted image element:", await (await fetch(url)).blob());
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
|
|
data_url_bin.addEventListener('click', ({ target }) => {
|
|
navigator.clipboard.writeText(target.textContent);
|
|
//TODO - move this stuff to a common API we can use in different places
|
|
if (Notification.permission === 'granted') {
|
|
new Notification("Copied to clipboard");
|
|
} else {
|
|
const toast = document.createElement('div');
|
|
toast.textContent = "Copied!";
|
|
Object.assign(toast.style, {
|
|
position: 'fixed',
|
|
bottom: '1em',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)',
|
|
background: '#333',
|
|
color: '#fff',
|
|
padding: '0.5em 1em',
|
|
borderRadius: '5px',
|
|
opacity: '0.9',
|
|
zIndex: 1000
|
|
});
|
|
document.body.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 1500);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="dropZone">Paste an image here (Ctrl+V)</div>
|
|
<code id="data_url_bin" style="width: 80vw"></code>
|
|
</body>
|
|
</html> |