mikael-lovqvist/websperiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added image tool

Browse Source
This commit is contained in:
Mikael Lövqvist
2025-07-21 19:30:29 +02:00
parent 56c1e10e06
commit 6d0436b0b5
3 changed files with 98 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
canvas/test1.html
View File

@@ -27,15 +27,14 @@
function run_experiment() { function run_experiment() {
const code = view.state.doc.toString(); const code = view.state.doc.toString();
const code_to_run = `(canvas, context, code) => { const code_to_run = `async (canvas, context, code) => {
const C = context; const C = context;
const W = canvas.width; const W = canvas.width;
const H = canvas.height; const H = canvas.height;
${code} ${code}
}`; }`;
eval(code_to_run)(canvas, context, code); return eval(code_to_run)(canvas, context, code); //Returning it so we can await it if we'd like to
} }

89
image/test1.html Normal file
View File

@@ -0,0 +1,89 @@
<!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>

7
index.html
View File

@@ -13,6 +13,13 @@
<li><a href="canvas/test1.html?src=triangular-lattice-offset-corrected.js">Triangular lattice - corrected offset</a></li> <li><a href="canvas/test1.html?src=triangular-lattice-offset-corrected.js">Triangular lattice - corrected offset</a></li>
</ul> </ul>
</li> </li>
<li>
<h2>Simple image playground</h2>
<ul>
<li><a href="image/test1.html">Default configuration</a></li>
</ul>
</li>
</ul> </ul>
Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a> Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a>