added canvas-size selecta and logo-color select

css/styles.css

@@ -90,6 +90,46 @@ label {
     font-weight: 600;
 }
 
+.hr {
+    border: 0;
+    border-top: 1px solid #ccc;
+}
+
+.form-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 10px 20px;
+    align-items: center;
+    max-width: 500px;
+    margin: auto;
+}
+
+.form-grid label {
+    text-align: left;
+    font-weight: 600;
+}
+
+.form-grid input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    justify-self: start;
+}
+
+.form-grid input[type="color"] {
+    width: 100%;
+    height: 40px;
+    border: none;
+    cursor: pointer;
+}
+
+.form-grid select {
+    width: 100%;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
 textarea, input[type="file"], input[type="range"], input[type="checkbox"] {
     padding: 12px 16px;
     font-size: 16px;
@@ -139,6 +179,7 @@ input[type="checkbox"] {
 .preview {
     flex: 1;
     display: flex;
+    flex-direction: column;
     align-items: center;
     padding: 20px;
     background-color: #fff;
@@ -147,10 +188,25 @@ input[type="checkbox"] {
 }
 
 #canvas {
-    max-width: 100%;
+    max-width: 90%;
-    max-height: 100%;
+    max-height: 80vh;
+    width: 100%;
+    height: 100%;
     border: 1px solid #ddd;
     border-radius: 8px;
+    object-fit: contain;
+    flex: 1 1 auto;
+}
+
+.canvas-hint {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #666;
+    text-align: center;
+}
+
+.canvas-hint p {
+    margin-bottom: 2px;
 }
 
 /* ========================

index.html

@@ -49,30 +49,62 @@
 <!-- Generator -->
 <section class="container my-5 text-center">
     <div class="container-generator">
-        <!-- Preview auf der linken Seite -->
+        <!-- Preview -->
         <div class="preview">
             <canvas id="canvas"></canvas>
+            <div class="canvas-hint">
+                <p>Hinweis: Du kannst das Hintergrundbild durch Ziehen mit der Maus oder </p>
+                <p>Wischen mit dem Finger frei verschieben!</p>
+            </div>
         </div>
 
-        <!-- Formular auf der rechten Seite -->
+        <!-- Formular -->
         <div class="form">
             <form>
+                <div class="form-grid">
+                    <label for="canvasSize">Canvas Größe:</label>
+                    <select id="canvasSize">
+                        <option value="square">1080 x 1080</option>
+                        <option value="horizontal">1080 x 1920</option>
+                        <option value="vertical">1920 x 1080</option>
+                    </select>
+                </div>
+
+                <hr>
+
                 <label for="imageUpload">Bild hochladen:</label>
                 <input type="file" id="imageUpload" accept="image/*">
 
                 <label for="logoUpload">Logo hochladen:</label>
                 <input type="file" id="logoUpload" accept="image/*">
 
-                <div class="checkbox-item">
+                <hr>
-                    <label for="logoLeft">Logo links platzieren:</label>
+
-                    <input type="checkbox" id="logoLeft">
+                <div class="form-grid">
+                    <label for="logoColor">Farbe des Logos:</label>
+                    <input type="color" id="logoColor" value="#000000">
+
+                    <label for="logoPosition">Logo Position:</label>
+                    <select id="logoPosition">
+                        <option value="top-left">Oben links</option>
+                        <option value="top-right" selected>Oben rechts</option>
+                        <option value="bottom-left">Unten links</option>
+                        <option value="bottom-right">Unten rechts</option>
+                    </select>
+
+                    <label for="logoBackground">Logo Hintergrund:</label>
+                    <input type="checkbox" id="logoBackground">
                 </div>
 
+                <hr>
+
                 <label for="headline">Überschrift:</label>
-                <textarea id="headline" placeholder="Gib deinen Text hier ein"></textarea>
+                <textarea id="headline" spellcheck="true" placeholder="Gib deinen Text hier ein"></textarea>
 
                 <label for="subline">Unterzeile:</label>
-                <textarea id="subline" placeholder="Gib deinen Untertext hier ein"></textarea>
+                <textarea id="subline" spellcheck="true" placeholder="Gib deinen Untertext hier ein"></textarea>
+
+                <hr>
 
                 <label for="fontSize">Schriftgröße:</label>
                 <input type="range" id="fontSize" min="30" max="60" value="45">

js/script.js

@@ -45,7 +45,9 @@ document.getElementById('subline').addEventListener('input', generateSharepic);
 document.getElementById('fontSize').addEventListener('input', generateSharepic);
 document.getElementById('boxHeight').addEventListener('input', generateSharepic);
 document.getElementById('logoSize').addEventListener('input', generateSharepic);
-document.getElementById('logoLeft').addEventListener('change', generateSharepic);
+document.getElementById('logoPosition').addEventListener('change', generateSharepic);
+document.getElementById('logoBackground').addEventListener('change', generateSharepic);
+document.getElementById('logoColor').addEventListener('input', drawCanvas);
 
 // Verarbeitet den Upload eines neuen Hintergrundbildes
 function handleImageUpload(event) {
@@ -98,8 +100,17 @@ function drawCanvas() {
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
 
-    canvas.width = 1080;
+    const canvasSize = document.getElementById('canvasSize').value;
-    canvas.height = 1080;
+    if (canvasSize === 'square') {
+        canvas.width = 1080;
+        canvas.height = 1080;
+    } else if (canvasSize === 'horizontal') {
+        canvas.width = 1080;
+        canvas.height = 1920;
+    } else if (canvasSize === 'vertical') {
+        canvas.width = 1920;
+        canvas.height = 1080;
+    }
 
     // Zeichnet das hochgeladene Hintergrundbild
     if (uploadedImage) {
@@ -166,14 +177,85 @@ function drawCanvas() {
             logoHeight = logoWidth / logoRatio;
         }
 
-        const logoLeft = document.getElementById('logoLeft').checked;
+        const logoPosition = document.getElementById('logoPosition').value;
-        const logoX = logoLeft ? 20 : canvas.width - logoWidth - 20;
+        let logoX, logoY;
 
-        ctx.drawImage(uploadedLogo, logoX, 20, logoWidth, logoHeight);
+        switch (logoPosition) {
+            case 'top-left':
+                logoX = 20;
+                logoY = 20;
+                break;
+            case 'top-right':
+                logoX = canvas.width - logoWidth - 20;
+                logoY = 20;
+                break;
+            case 'bottom-left':
+                logoX = 20;
+                logoY = canvas.height - logoHeight - 20;
+                break;
+            case 'bottom-right':
+                logoX = canvas.width - logoWidth - 20;
+                logoY = canvas.height - logoHeight - 20;
+                break;
+        }
+
+        // Erstellt ein temporäres Canvas für die Farbmanipulation
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = logoWidth;
+        tempCanvas.height = logoHeight;
+        const tempCtx = tempCanvas.getContext('2d');
+
+        // Zeichnet das Original-Logo
+        tempCtx.drawImage(uploadedLogo, 0, 0, logoWidth, logoHeight);
+
+        // Holt die ausgewählte Farbe
+        const logoColor = document.getElementById('logoColor').value;
+
+        // Setzt den Modus auf "source-atop" und färbt das Logo um
+        tempCtx.globalCompositeOperation = 'source-atop';
+        tempCtx.fillStyle = logoColor;
+        tempCtx.fillRect(0, 0, logoWidth, logoHeight);
+
+        // Zeichnet den Hintergrund, falls aktiviert
+        const logoBackground = document.getElementById('logoBackground').checked;
+        if (logoBackground) {
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(logoX, logoY, logoWidth, logoHeight);
+        }
+
+        // Zeichnet das eingefärbte Logo auf das Haupt-Canvas
+        ctx.drawImage(tempCanvas, logoX, logoY);
     }
 }
 
 // Canvas-Referenz
+document.getElementById('canvasSize').addEventListener('change', function (e) {
+    const canvas = document.getElementById('canvas');
+    const selectedSize = e.target.value;
+
+    // Setze die Canvas-Größe basierend auf der Auswahl
+    switch (selectedSize) {
+        case 'square':
+            canvas.width = 1080;
+            canvas.height = 1080;
+            break;
+        case 'horizontal':
+            canvas.width = 1080;
+            canvas.height = 1920;
+            break;
+        case 'vertical':
+            canvas.width = 1920;
+            canvas.height = 1080;
+            break;
+    }
+
+    // Setze die Offsets zurück, wenn die Canvas-Größe geändert wird
+    imageOffsetX = 0;
+    imageOffsetY = 0;
+
+    drawCanvas();
+});
+
 const canvas = document.getElementById('canvas');
 if (!canvas) {
     console.error('Canvas element not found');