Create image-resize-quality.html

simonw · web-flow · commit 5b41e77f0543 · 2024-07-25T15:01:28.000-07:00
Adapted from this Claude artifact https://claude.site/artifacts/45ecf75e-d8e2-4d2a-a3b9-d8c07c7bd757
diff --git a/image-resize-quality.html b/image-resize-quality.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image resize and quality comparison</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        #drop-zone {
+            border: 2px dashed #ccc;
+            border-radius: 20px;
+            width: 100%;
+            height: 200px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+        }
+        #drop-zone.dragover {
+            background-color: #e0e0e0;
+        }
+        #output {
+            margin-top: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+        .image-container {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .image-container img {
+            max-width: 80%;
+            height: auto;
+            cursor: pointer;
+            transition: max-width 0.3s ease;
+        }
+        .image-container img.full-width {
+            max-width: unset;
+        }
+        .image-info {
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Image resize and quality comparison</h1>
+    <div id="drop-zone">
+        <p>Drop an image here or click to select</p>
+    </div>
+    <input type="file" id="file-input" accept="image/*" style="display: none;">
+    <div id="output"></div>
+
+    <script>
+        const dropZone = document.getElementById('drop-zone');
+        const fileInput = document.getElementById('file-input');
+        const output = document.getElementById('output');
+
+        dropZone.addEventListener('click', () => fileInput.click());
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+        dropZone.addEventListener('drop', handleDrop);
+        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
+
+        function handleDrop(e) {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            const file = e.dataTransfer.files[0];
+            if (file && file.type.startsWith('image/')) {
+                handleFile(file);
+            }
+        }
+
+        function handleFile(file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.onload = () => processImage(img);
+                img.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        function processImage(img) {
+            output.innerHTML = '';
+            const qualities = [1, 0.9, 0.7, 0.5, 0.3];
+            const widths = [img.width, img.width / 2];
+
+            widths.forEach(width => {
+                const heightRatio = width / img.width;
+                const height = img.height * heightRatio;
+
+                qualities.forEach(quality => {
+                    const canvas = document.createElement('canvas');
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, width, height);
+
+                    canvas.toBlob(blob => {
+                        const url = URL.createObjectURL(blob);
+                        const container = document.createElement('div');
+                        container.className = 'image-container';
+                        const resultImg = document.createElement('img');
+                        resultImg.src = url;
+                        resultImg.addEventListener('click', () => {
+                            resultImg.classList.toggle('full-width');
+                        });
+
+                        const infoDiv = document.createElement('div');
+                        infoDiv.className = 'image-info';
+                        infoDiv.innerHTML = `
+                            Width: ${width}px<br>
+                            Quality: ${quality.toFixed(1)}<br>
+                            Size: ${(blob.size / 1024).toFixed(2)} KB
+                        `;
+
+                        const downloadLink = document.createElement('a');
+                        downloadLink.href = url;
+                        downloadLink.download = `image_w${width}_q${quality.toFixed(1)}.jpg`;
+                        downloadLink.textContent = 'Download';
+
+                        container.appendChild(resultImg);
+                        container.appendChild(infoDiv);
+                        container.appendChild(downloadLink);
+                        output.appendChild(container);
+                    }, 'image/jpeg', quality);
+                });
+            });
+        }
+    </script>
+</body>
+</html>
