Upload files to "test_examples/ColorDetection"

2024-02-24 12:33:08 +01:00
parent a608abd452
commit 5ba3906c42
1 changed files with 79 additions and 0 deletions
--- a/test_examples/ColorDetection/index.html
+++ b/test_examples/ColorDetection/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Analysis</title>
+</head>
+<body>
+    <input type="file" id="imageInput" accept="image/*">
+    <canvas id="imageCanvas" style="display: none;"></canvas>
+    <div id="result"></div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            // Dateiinput für das Bild
+            var imageInput = document.getElementById('imageInput');
+            imageInput.addEventListener('change', handleImage);
+
+            function handleImage(event) {
+                // Überprüfen, ob eine Datei ausgewählt wurde
+                if (event.target.files.length > 0) {
+                    // Bild-URL erstellen
+                    var imageUrl = URL.createObjectURL(event.target.files[0]);
+
+                    // Bild auf die Leinwand zeichnen und Farbanalyse durchführen
+                    analyzeColors(imageUrl);
+                }
+            }
+
+            function analyzeColors(imageUrl) {
+                var image = new Image();
+
+                image.onload = function () {
+                    var canvas = document.getElementById('imageCanvas');
+                    var context = canvas.getContext('2d');
+
+                    // Canvas mit der gleichen Größe wie das Bild einstellen
+                    canvas.width = image.width;
+                    canvas.height = image.height;
+
+                    // Bild auf das Canvas zeichnen
+                    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+                    // Farbanalyse durchführen
+                    var colorCounts = {};
+                    var imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+
+                    for (var i = 0; i < imageData.length; i += 4) {
+                        var red = imageData[i];
+                        var green = imageData[i + 1];
+                        var blue = imageData[i + 2];
+                        var color = 'rgb(' + red + ',' + green + ',' + blue + ')';
+
+                        // Zählen, wie oft jede Farbe vorkommt
+                        colorCounts[color] = (colorCounts[color] || 0) + 1;
+                    }
+
+                    // Die am häufigsten vorkommende Farbe finden
+                    var mostCommonColor = Object.keys(colorCounts).reduce(function (a, b) {
+                        return colorCounts[a] > colorCounts[b] ? a : b;
+                    });
+
+                    // Ergebnis anzeigen
+                    displayResult(mostCommonColor);
+                };
+
+                // Bildquelle setzen
+                image.src = imageUrl;
+            }
+
+            function displayResult(color) {
+                var resultDiv = document.getElementById('result');
+                resultDiv.textContent = 'Most Common Color: ' + color;
+                resultDiv.style.backgroundColor = color;
+            }
+        });
+    </script>
+</body>
+</html>