jannik.menzel/iFSR-Sharepicgenerator
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added image copyright

Browse source
This commit is contained in:
Jannik Menzel 2025-02-03 13:05:02 +01:00
parent 7af09760e2
commit 401ff4511a
3 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
css/styles.css
View file

@ -17,6 +17,10 @@ body {
line-height: 1.6;
}
.copyright {
max-width: 800px;
}
/* ========================
Navigation
======================== */

9
index.html
View file

@ -105,6 +105,11 @@
<hr>
<label for="copyright">Copyright:</label>
<textarea id="copyright" spellcheck="true" placeholder="Gib deinen Text hier ein"></textarea>
<hr>
<label for="fontSize">Schriftgröße:</label>
<input type="range" id="fontSize" min="30" max="60" value="45">
@ -112,7 +117,7 @@
<input type="range" id="logoSize" min="50" max="350" value="200">
<label for="boxHeight">Boxhöhe:</label>
<input type="range" id="boxHeight" min="200" max="500" value="350">
<input type="range" id="boxHeight" min="200" max="400" value="300">
<!-- Button zum Herunterladen -->
<button id="downloadBtn">Download</button>
@ -123,7 +128,7 @@
<!-- Copyright und Hinweise -->
<section class="container my-5 text-center">
<div class="container" style="max-width: 800px;">
<div class="container copyright">
<h2 class="display-5">Hinweis</h2>
<p>Für das Hochladen von Bildern und Logos gilt, dass ausschließlich Material hochgeladen werden darf, für das du die entsprechenden Rechte besitzt. Falls du keine eigenen Bilder oder Logos verwenden möchtest, kannst du auf Plattformen wie Unsplash, Pexels und Pixabay zurückgreifen, die lizenzfreie oder copyrightfreie Fotos anbieten.</p>
</div>

6
js/script.js
View file

@ -12,11 +12,13 @@ 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.';
const defaultCopyright = 'Bild: ⓒ 2025 Name';
// Initialisierung beim Laden der Seite
window.onload = function () {
document.getElementById('headline').value = defaultHeadline;
document.getElementById('subline').value = defaultSubline;
document.getElementById('copyright').value = defaultCopyright;
loadDefaultImage();
loadDefaultLogo();
@ -42,6 +44,7 @@ document.getElementById('imageUpload').addEventListener('change', handleImageUpl
document.getElementById('logoUpload').addEventListener('change', handleLogoUpload);
document.getElementById('headline').addEventListener('input', generateSharepic);
document.getElementById('subline').addEventListener('input', generateSharepic);
document.getElementById('copyright').addEventListener('input', generateSharepic);
document.getElementById('fontSize').addEventListener('input', generateSharepic);
document.getElementById('boxHeight').addEventListener('input', generateSharepic);
document.getElementById('logoSize').addEventListener('input', generateSharepic);
@ -127,6 +130,7 @@ function drawCanvas() {
// Holt die Texteingaben
const headline = document.getElementById('headline').value;
const subline = document.getElementById('subline').value;
const copyright = document.getElementById('copyright').value;
const fontSize = parseInt(document.getElementById('fontSize').value);
// Setzt Schriftfarbe
@ -134,6 +138,7 @@ function drawCanvas() {
const headlineFont = `bold ${fontSize * 1.2}px 'Cairo', sans-serif`;
const sublineFont = `${fontSize}px 'Cairo', sans-serif`;
const copyrightFont = `${fontSize * 0.5}px 'Cairo', sans-serif`;
const maxWidth = canvas.width - 2 * boxPadding - 40;
// Funktion zum Umbruch langer Texte
@ -164,6 +169,7 @@ function drawCanvas() {
// 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);
wrapText(ctx, copyright, boxPadding + 20, canvas.height - boxPadding - 20, maxWidth, copyrightFont);
// Zeichnet das Logo
if (uploadedLogo) {