Added paste support

simonw · web-flow · commit fa5a395de379 · 2024-08-01T10:46:51.000-07:00
curl 'https://tools.simonwillison.net/image-resize-quality' | llm -m claude-3.5-sonnet --system 'output just the new HTML for a version of this page that also allows users to paste images'
diff --git a/image-resize-quality.html b/image-resize-quality.html
@@ -51,7 +51,7 @@
 <body>
     <h1>Image resize and quality comparison</h1>
     <div id="drop-zone">
-        <p>Drop an image here or click to select</p>
+        <p>Drop an image here, click to select, or paste an image</p>
     </div>
     <input type="file" id="file-input" accept="image/*" style="display: none;">
     <div id="output"></div>
@@ -70,6 +70,9 @@ <h1>Image resize and quality comparison</h1>
         dropZone.addEventListener('drop', handleDrop);
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
 
+        // Add paste event listener to the document
+        document.addEventListener('paste', handlePaste);
+
         function handleDrop(e) {
             e.preventDefault();
             dropZone.classList.remove('dragover');
@@ -89,6 +92,17 @@ <h1>Image resize and quality comparison</h1>
             reader.readAsDataURL(file);
         }
 
+        function handlePaste(e) {
+            const items = e.clipboardData.items;
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') !== -1) {
+                    const blob = items[i].getAsFile();
+                    handleFile(blob);
+                    break;
+                }
+            }
+        }
+
         function processImage(img) {
             output.innerHTML = '';
             const qualities = [1, 0.9, 0.7, 0.5, 0.3];
