Added image tool

2025-07-21 19:30:29 +02:00
parent 56c1e10e06
commit 6d0436b0b5
3 changed files with 98 additions and 3 deletions
--- a/canvas/test1.html
+++ b/canvas/test1.html
@@ -27,15 +27,14 @@

 			function run_experiment() {
 				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 W = canvas.width;
 					const H = canvas.height;

 					${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
 			}


--- a/image/test1.html
+++ b/image/test1.html
@@ -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>
--- a/index.html
+++ b/index.html
@@ -13,6 +13,13 @@
 				<li><a href="canvas/test1.html?src=triangular-lattice-offset-corrected.js">Triangular lattice - corrected offset</a></li>
 			</ul>
 		</li>
+
+		<li>
+			<h2>Simple image playground</h2>
+			<ul>
+				<li><a href="image/test1.html">Default configuration</a></li>
+			</ul>
+		</li>
 	</ul>

 Source: <a href="https://github.com/Mikael-Lovqvist/websperiments">https://github.com/Mikael-Lovqvist/websperiments</a>