Add background color feature to image-resize-quality

simonw · web-flow · commit 41c4d1579321 · 2025-01-29T09:43:26.000-08:00
https://gist.github.com/simonw/04e9fd78af5f739d97deb69a75c9aa2a
diff --git a/image-resize-quality.html b/image-resize-quality.html
@@ -24,6 +24,10 @@
         #drop-zone.dragover {
             background-color: #e0e0e0;
         }
+        #color-picker-container {
+            margin: 20px 0;
+            display: none;
+        }
         #output {
             margin-top: 20px;
             display: flex;
@@ -46,6 +50,9 @@
         .image-info {
             margin-top: 10px;
         }
+        .color-picker-label {
+            margin-right: 10px;
+        }
     </style>
 </head>
 <body>
@@ -54,12 +61,19 @@ <h1>Image resize and quality comparison</h1>
         <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="color-picker-container">
+        <label class="color-picker-label" for="background-color">Background Color:</label>
+        <input type="color" id="background-color" value="#ffffff">
+    </div>
     <div id="output"></div>
 
     <script>
         const dropZone = document.getElementById('drop-zone');
         const fileInput = document.getElementById('file-input');
         const output = document.getElementById('output');
+        const colorPicker = document.getElementById('background-color');
+        const colorPickerContainer = document.getElementById('color-picker-container');
+        let currentImage = null;
 
         dropZone.addEventListener('click', () => fileInput.click());
         dropZone.addEventListener('dragover', (e) => {
@@ -69,9 +83,12 @@ <h1>Image resize and quality comparison</h1>
         dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
         dropZone.addEventListener('drop', handleDrop);
         fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-
-        // Add paste event listener to the document
         document.addEventListener('paste', handlePaste);
+        colorPicker.addEventListener('input', () => {
+            if (currentImage) {
+                processImage(currentImage);
+            }
+        });
 
         function handleDrop(e) {
             e.preventDefault();
@@ -86,7 +103,11 @@ <h1>Image resize and quality comparison</h1>
             const reader = new FileReader();
             reader.onload = (e) => {
                 const img = new Image();
-                img.onload = () => processImage(img);
+                img.onload = () => {
+                    currentImage = img;
+                    checkTransparency(img);
+                    processImage(img);
+                };
                 img.src = e.target.result;
             };
             reader.readAsDataURL(file);
@@ -103,6 +124,25 @@ <h1>Image resize and quality comparison</h1>
             }
         }
 
+        function checkTransparency(img) {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0);
+            
+            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            const data = imageData.data;
+            
+            for (let i = 3; i < data.length; i += 4) {
+                if (data[i] < 255) {
+                    colorPickerContainer.style.display = 'block';
+                    return;
+                }
+            }
+            colorPickerContainer.style.display = 'none';
+        }
+
         function processImage(img) {
             output.innerHTML = '';
             const qualities = [1, 0.9, 0.7, 0.5, 0.3];
@@ -117,6 +157,13 @@ <h1>Image resize and quality comparison</h1>
                     canvas.width = width;
                     canvas.height = height;
                     const ctx = canvas.getContext('2d');
+
+                    // Fill background if color picker is visible
+                    if (colorPickerContainer.style.display === 'block') {
+                        ctx.fillStyle = colorPicker.value;
+                        ctx.fillRect(0, 0, width, height);
+                    }
+
                     ctx.drawImage(img, 0, 0, width, height);
 
                     canvas.toBlob(blob => {
