Initial commit

js/script.js

@@ -0,0 +1,215 @@
+// Variablen für hochgeladene Bilder und deren Position
+let uploadedImage = null;
+let uploadedLogo = null;
+let imageOffsetX = 0;
+let imageOffsetY = 0;
+let isDragging = false;
+let dragStartX = 0;
+let dragStartY = 0;
+
+// Standardwerte für Bild, Logo und Texte
+const defaultImage = 'assets/images/defaultBackground.jpg';
+const defaultLogo = 'assets/images/defaultLogo.svg';
+const defaultHeadline = 'iFSR sharepic Headline';
+const defaultSubline = 'Hier könnte ein unfassbar fesselnder Werbetext des Fachschaftsrats Informatik stehen.';
+
+// Initialisierung beim Laden der Seite
+window.onload = function () {
+    document.getElementById('headline').value = defaultHeadline;
+    document.getElementById('subline').value = defaultSubline;
+
+    loadDefaultImage();
+    loadDefaultLogo();
+    generateSharepic();
+};
+
+// Lädt das Standardhintergrundbild
+function loadDefaultImage() {
+    uploadedImage = new Image();
+    uploadedImage.onload = drawCanvas;
+    uploadedImage.src = defaultImage;
+}
+
+// Lädt das Standardlogo
+function loadDefaultLogo() {
+    uploadedLogo = new Image();
+    uploadedLogo.onload = drawCanvas;
+    uploadedLogo.src = defaultLogo;
+}
+
+// Event-Listener für Datei-Uploads und Eingaben
+document.getElementById('imageUpload').addEventListener('change', handleImageUpload);
+document.getElementById('logoUpload').addEventListener('change', handleLogoUpload);
+document.getElementById('headline').addEventListener('input', generateSharepic);
+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);
+
+// Verarbeitet den Upload eines neuen Hintergrundbildes
+function handleImageUpload(event) {
+    const file = event.target.files[0];
+    if (file) {
+        const imageUrl = URL.createObjectURL(file);
+        uploadedImage = new Image();
+        uploadedImage.onload = function () {
+            imageOffsetX = 0;
+            imageOffsetY = 0;
+            drawCanvas();
+        };
+        uploadedImage.src = imageUrl;
+    }
+}
+
+// Verarbeitet den Upload eines neuen Logos
+function handleLogoUpload(event) {
+    const file = event.target.files[0];
+    if (file) {
+        const logoUrl = URL.createObjectURL(file);
+        uploadedLogo = new Image();
+        uploadedLogo.onload = drawCanvas;
+        uploadedLogo.src = logoUrl;
+    }
+}
+
+// Generiert das Sharepic neu
+function generateSharepic() {
+    drawCanvas();
+}
+
+// Berechnet die Bildgröße passend zur Canvas-Größe
+function calculateImageDimensions(image, canvas) {
+    let imageWidth, imageHeight;
+
+    if (image.width > image.height) {
+        imageHeight = canvas.height;
+        imageWidth = image.width * (imageHeight / image.height);
+    } else {
+        imageWidth = canvas.width;
+        imageHeight = image.height * (imageWidth / image.width);
+    }
+
+    return { width: imageWidth, height: imageHeight };
+}
+
+// Zeichnet das Canvas mit Bild, Logo und Text
+function drawCanvas() {
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+
+    canvas.width = 1080;
+    canvas.height = 1080;
+
+    // Zeichnet das hochgeladene Hintergrundbild
+    if (uploadedImage) {
+        const { width, height } = calculateImageDimensions(uploadedImage, canvas);
+        ctx.drawImage(uploadedImage, imageOffsetX, imageOffsetY, width, height);
+    }
+
+    // Zeichnet das weiße Textfeld
+    const boxHeight = parseInt(document.getElementById('boxHeight').value);
+    const boxPadding = 20;
+    ctx.fillStyle = 'white';
+    ctx.fillRect(boxPadding, canvas.height - boxHeight - boxPadding, canvas.width - 2 * boxPadding, boxHeight);
+
+    // Holt die Texteingaben
+    const headline = document.getElementById('headline').value;
+    const subline = document.getElementById('subline').value;
+    const fontSize = parseInt(document.getElementById('fontSize').value);
+
+    // Setzt Schriftfarbe
+    ctx.fillStyle = 'black';
+
+    const headlineFont = `bold ${fontSize * 1.2}px 'Cairo', sans-serif`;
+    const sublineFont = `${fontSize}px 'Cairo', sans-serif`;
+    const maxWidth = canvas.width - 2 * boxPadding - 40;
+
+    // Funktion zum Umbruch langer Texte
+    function wrapText(ctx, text, x, y, maxWidth, font) {
+        ctx.font = font;
+        const lineHeight = parseInt(font.match(/\d+/)[0]) * 1.2;
+
+        const words = text.split(' ');
+        let line = '';
+        let lines = [];
+
+        for (let n = 0; n < words.length; n++) {
+            let testLine = line + words[n] + ' ';
+            let testWidth = ctx.measureText(testLine).width;
+
+            if (testWidth > maxWidth && n > 0) {
+                lines.push(line);
+                line = words[n] + ' ';
+            } else {
+                line = testLine;
+            }
+        }
+        lines.push(line);
+
+        lines.forEach((line, i) => ctx.fillText(line, x, y + i * lineHeight));
+    }
+
+    // Zeichnet Headline und Subline ins Canvas
+    wrapText(ctx, headline, boxPadding + 20, canvas.height - boxHeight - boxPadding + 80, maxWidth, headlineFont);
+    wrapText(ctx, subline, boxPadding + 20, canvas.height - boxHeight - boxPadding + 150, maxWidth, sublineFont);
+
+    // Zeichnet das Logo
+    if (uploadedLogo) {
+        const logoSize = parseInt(document.getElementById('logoSize').value);
+        const logoRatio = uploadedLogo.width / uploadedLogo.height;
+        let logoWidth = logoSize * logoRatio;
+        let logoHeight = logoSize;
+
+        if (logoWidth > canvas.width - 40) {
+            logoWidth = canvas.width - 40;
+            logoHeight = logoWidth / logoRatio;
+        }
+
+        const logoLeft = document.getElementById('logoLeft').checked;
+        const logoX = logoLeft ? 20 : canvas.width - logoWidth - 20;
+
+        ctx.drawImage(uploadedLogo, logoX, 20, logoWidth, logoHeight);
+    }
+}
+
+// Bild-Drag-Funktionalität
+const canvas = document.getElementById('canvas');
+canvas.addEventListener('mousedown', function (e) {
+    if (uploadedImage) {
+        isDragging = true;
+        dragStartX = e.offsetX - imageOffsetX;
+        dragStartY = e.offsetY - imageOffsetY;
+    }
+});
+
+canvas.addEventListener('mousemove', function (e) {
+    if (isDragging && uploadedImage) {
+        const { width, height } = calculateImageDimensions(uploadedImage, canvas);
+
+        if (uploadedImage.width > uploadedImage.height) {
+            imageOffsetX = e.offsetX - dragStartX;
+            imageOffsetX = Math.min(0, Math.max(imageOffsetX, canvas.width - width));
+        } else {
+            imageOffsetY = e.offsetY - dragStartY;
+            imageOffsetY = Math.min(0, Math.max(imageOffsetY, canvas.height - height));
+        }
+        drawCanvas();
+    }
+});
+
+canvas.addEventListener('mouseup', () => isDragging = false);
+canvas.addEventListener('mouseout', () => isDragging = false);
+
+// Download-Button für das Sharepic
+document.getElementById('downloadBtn').addEventListener('click', function (event) {
+    event.preventDefault();
+
+    const dataUrl = canvas.toDataURL('image/png');
+    const a = document.createElement('a');
+    a.href = dataUrl;
+    a.download = 'sharepic.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+});