<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta property="og:title" content="Teile dein Bild mit Open Graph">

    <meta property="og:description" content="Lade ein Bild hoch und teile es in einem Link mit Open Graph-Tags.">

    <meta property="og:image" content="" id="ogImage">

    <meta property="og:type" content="website">

    <meta property="og:url" content="https://deinedomain.de">

    <title>Open Graph Image Uploader</title>

</head>

<body>

    <h1>Open Graph Image Uploader</h1>

    <form id="imageForm">

        <label for="imageUpload">Wähle ein Bild aus:</label><br><br>

        <input type="file" id="imageUpload" accept="image/*"><br><br>

        <button type="button" onclick="uploadImage()">Bild hochladen</button>

    </form>

    <p id="status"></p>


    <script>

        function uploadImage() {

            const fileInput = document.getElementById("imageUpload");

            const statusText = document.getElementById("status");

            const ogImageMeta = document.getElementById("ogImage");


            if (fileInput.files.length === 0) {

                statusText.textContent = "Bitte wähle ein Bild aus.";

                return;

            }


            const file = fileInput.files[0];

            const reader = new FileReader();


            // Bild als Base64 laden und temporär als Open Graph-Bild setzen

            reader.onload = function(event) {

                const base64Image = event.target.result;

                ogImageMeta.setAttribute("content", base64Image);

                statusText.textContent = "Bild hochgeladen und Open Graph-Tags aktualisiert!";

                console.log("Bild in Open Graph gesetzt:", base64Image);

            };


            reader.onerror = function() {

                statusText.textContent = "Fehler beim Hochladen des Bildes.";

            };


            reader.readAsDataURL(file);

        }

    </script>

</body>

</html>