Upload files to "test_examples/PictureScale"

2024-02-24 12:32:44 +01:00 · 2024-02-24 12:32:44 +01:00 · a608abd452
parent 6181a5da83
commit a608abd452
1 changed files with 61 additions and 0 deletions
--- a/test_examples/PictureScale/index.html
+++ b/test_examples/PictureScale/index.html
@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kamerafoto aufnehmen</title>
+</head>
+<body>
+
+<button id="captureButton">Foto aufnehmen</button>
+<img id="capturedImage" style="display: none;">
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    const captureButton = document.getElementById("captureButton");
+    const capturedImage = document.getElementById("capturedImage");
+
+    // Wenn der Button geklickt wird, rufe die Funktion zum Aufnehmen eines Fotos auf
+    captureButton.addEventListener("click", function() {
+        capturePhoto();
+    });
+
+    function capturePhoto() {
+        // Nutzererlaubnis für Kamera erhalten
+        navigator.mediaDevices.getUserMedia({ video: true })
+            .then(function (stream) {
+                // Verbinde den Video-Stream mit einem Video-Element auf der Seite
+                const video = document.createElement("video");
+                document.body.appendChild(video);
+                video.srcObject = stream;
+                video.play();
+
+                // Wenn der Nutzer auf den Button zum Aufnehmen klickt
+                captureButton.addEventListener("click", function() {
+                    // Erstelle ein Canvas mit der gewünschten Größe
+                    const canvas = document.createElement("canvas");
+                    canvas.width = 75;
+                    canvas.height = 115;
+                    const context = canvas.getContext("2d");
+
+                    // Zeichne das aktuelle Bild des Video-Elements auf das Canvas mit der neuen Größe
+                    context.drawImage(video, 0, 0, 75, 115);
+
+                    // Stoppe den Video-Stream
+                    stream.getTracks().forEach(track => track.stop());
+
+                    // Verberge das Video-Element und zeige das aufgenommene Bild an
+                    video.style.display = "none";
+                    capturedImage.style.display = "block";
+                    capturedImage.src = canvas.toDataURL("image/png");
+                });
+            })
+            .catch(function (error) {
+                console.error("Fehler beim Zugriff auf die Kamera:", error);
+            });
+    }
+});
+</script>
+
+</body>
+</html>