27.02.2023, 09:45
Hallo zusammen,
ich bin ganz neu hier und auch nicht der Javascript-Profi!
Ich verzweifle gerade an meinem Script.
Ich habe mir eine html/Javascript Datei gebaut, bei dieser gibt es ein Bild (image.png) auf diesem werden per input type Namen eingegeben und mit canvas Namen auf dem Bild platziert. Es klappt auch alles ganz Prima, das Problem ist, ich habe noch einen Dowload-Button eingebaut, mit dem man das neu generierte Bild mit den Namen herunterladen können soll. Nur dieser will einfach nicht, es passiert nichts! Es wird nur Lokal auf meinem Rechner ausgeführt, es gibt keine Webseite.
Hier kommt mal mein Code HTML:
Hier der Javascript-Teil
ich bin ganz neu hier und auch nicht der Javascript-Profi!
Ich verzweifle gerade an meinem Script.
Ich habe mir eine html/Javascript Datei gebaut, bei dieser gibt es ein Bild (image.png) auf diesem werden per input type Namen eingegeben und mit canvas Namen auf dem Bild platziert. Es klappt auch alles ganz Prima, das Problem ist, ich habe noch einen Dowload-Button eingebaut, mit dem man das neu generierte Bild mit den Namen herunterladen können soll. Nur dieser will einfach nicht, es passiert nichts! Es wird nur Lokal auf meinem Rechner ausgeführt, es gibt keine Webseite.
Hier kommt mal mein Code HTML:
Code:
<body>
<div class="input-container">
<h2 style="display: flex; align-items: center; justify-content: center;">Platzierungen eingeben</h2>
<div class="ranking-container">
<div class="ranking">
<h3 style="display: flex; align-items: center; justify-content: center;">1.er</h3>
<label>Name 1:</label>
<input type="text" id="name1-1">
<label>Name 2:</label>
<input type="text" id="name1-2">
<label>Name 3:</label>
<input type="text" id="name1-3">
<label>Name 4:</label>
<input type="text" id="name1-4">
<label>Name 5:</label>
<input type="text" id="name1-5">
</div>
<div class="ranking">
<h3 style="display: flex; align-items: center; justify-content: center;">2.er</h3>
<label>Name 1:</label>
<input type="text" id="name2-1">
<label>Name 2:</label>
<input type="text" id="name2-2">
<label>Name 3:</label>
<input type="text" id="name2-3">
<label>Name 4:</label>
<input type="text" id="name2-4">
<label>Name 5:</label>
<input type="text" id="name2-5">
</div>
<div class="ranking">
<h3 style="display: flex; align-items: center; justify-content: center;">3.er</h3>
<label>Name 1:</label>
<input type="text" id="name3-1">
<label>Name 2:</label>
<input type="text" id="name3-2">
<label>Name 3:</label>
<input type="text" id="name3-3">
<label>Name 4:</label>
<input type="text" id="name3-4">
<label>Name 5:</label>
<input type="text" id="name3-5">
</div>
</div>
<button onclick="generateNames()">Generieren</button>
</div>
<div class="output-container">
<canvas id="canvas"></canvas>
<button onclick="downloadImage()">Bild herunterladen</button>
</div>
<script>
HIER ZWISCHEN STEHT DER UNTEN AUFGEFÜHRTE JAVASCRIPT-CODE
</script>
</body>PHP-Code:
<?php
function generateNames() {
// Canvas initialisieren
const canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
const ctx = canvas.getContext('2d');
// Hintergrundbild laden
const img = new Image();
img.src = 'image.png';
img.onload = function() {
// Hintergrundbild zeichnen
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// Namen generieren
const names1 = [];
const names2 = [];
const names3 = [];
for (let i = 1; i <= 5; i++) {
const name1 = document.getElementById(`name1-${i}`).value;
if (name1) names1.push(name1);
const name2 = document.getElementById(`name2-${i}`).value;
if (name2) names2.push(name2);
const name3 = document.getElementById(`name3-${i}`).value;
if (name3) names3.push(name3);
}
// Namen auf dem Canvas zeichnen
const fontSize = 14;
const x1 = canvas.width / 2;
const y1 = canvas.height / 1.2;
const x2 = canvas.width * 0.2;
const y2 = canvas.height / 1.2;
const x3 = canvas.width * 0.78;
const y3 = canvas.height / 1.23;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Namen in 3D zeichnen
ctx.font = `bold ${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = 'white';
ctx.shadowColor = 'black';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
// Platz 1 Namen
ctx.fillStyle = 'gold';
for (let i = 0; i < names1.length; i++) {
const name = names1[i];
const y = y1 + (i - (names1.length - 1) / 2) * fontSize;
ctx.fillText(name, x1, y);
}
// Platz 2 Namen
ctx.fillStyle = 'silver';
for (let i = 0; i < names2.length; i++) {
const name = names2[i];
const y = y2 + i * fontSize;
ctx.fillText(name, x2, y);
}
// Platz 3 Namen
ctx.fillStyle = '#CD7F32';
for (let i = 0; i < names3.length; i++) {
const name = names3[i];
const y = y3 + i * fontSize;
ctx.fillText(name, x3, y);
}
// Kreiert Download
function downloadImage() {
const canvas = document.getElementById('canvas');
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'ranking.png';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
};
}
Würde mich freuen, wenn mal einer drüberschauen könnte und mir vielleicht eine Lösung geben kann.
Vielen Dank vorab, El Gordo
