Add warning for images with no transparency

Author: ThioJoe

Tools/Centroid Center Calculator.html

@@ -291,6 +291,17 @@
         }
 
         .toggle-text { font-weight: 500; color: white; }
+
+        .warning-banner {
+            background-color: #78350f;
+            border: 1px solid #f59e0b;
+            color: #fde68a;
+            border-radius: 0.5rem;
+            padding: 0.75rem 1rem;
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+            text-align: center;
+        }
     </style>
 </head>
 
@@ -311,6 +322,10 @@ <h1 class="title">Visual Centroid Calculator</h1>
                 <p id="fileName" class="file-name"></p>
             </div>
 
+            <div id="noAlphaWarning" class="warning-banner hidden">
+                ⚠ This image has no transparency. Results may not be meaningful — this tool is designed for images with transparent regions.
+            </div>
+
             <!-- Main Content Area -->
             <div id="content-area" class="hidden">
                 <!-- Canvas and Results Wrapper -->
@@ -421,6 +436,8 @@ <h3>No image selected</h3>
             const bboxToggle = document.getElementById('bboxToggle');
             const crosshairsToggle = document.getElementById('crosshairsToggle');
 
+            const noAlphaWarning = document.getElementById('noAlphaWarning');
+
             let currentImageState = { img: null, centroid: null, bboxCenter: null };
 
             imageUpload.addEventListener('change', (event) => handleFile(event.target.files[0]));
@@ -496,6 +513,9 @@ <h3>No image selected</h3>
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(img, 0, 0);
 
+                const hasTransparency = checkForTransparency();
+                noAlphaWarning.classList.toggle('hidden', hasTransparency);
+
                 const centroid = calculateCentroid();
                 const bboxCenter = { x: img.width / 2, y: img.height / 2 };
 
@@ -510,6 +530,15 @@ <h3>No image selected</h3>
                 updateVisualVisibility();
             }
 
+            function checkForTransparency() {
+                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) return true;
+                }
+                return false;
+            }
+
             function calculateCentroid() {
                 const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                 const data = imageData.data;