Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Canvas Download-Button
#1
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:
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>
Hier der Javascript-Teil
PHP-Code:
        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(img00canvas.widthcanvas.height);
        
                
// Namen generieren
                
const names1 = [];
                const 
names2 = [];
                const 
names3 = [];
                for (
let i 1<= 5i++) {
                const 
name1 document.getElementById(`name1-${i}`).value;
                if (
name1names1.push(name1);
                const 
name2 document.getElementById(`name2-${i}`).value;
                if (
name2names2.push(name2);
                const 
name3 document.getElementById(`name3-${i}`).value;
                if (
name3names3.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 0names1.lengthi++) {
                    const 
name names1[i];
                    const 
y1 + (- (names1.length 1) / 2) * fontSize;
                    
ctx.fillText(namex1y);
                }
        
                
// Platz 2 Namen
                
ctx.fillStyle 'silver';
                for (
let i 0names2.lengthi++) {
                    const 
name names2[i];
                    const 
y2 fontSize;
                    
ctx.fillText(namex2y);
                }
        
                
// Platz 3 Namen
                
ctx.fillStyle '#CD7F32';
                for (
let i 0names3.lengthi++) {
                    const 
name names3[i];
                    const 
y3 fontSize;
                    
ctx.fillText(namex3y);
                }
                
                
// 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
Zitieren
#2
Ist das Problem noch aktuell?
Ich bin jetzt auch wieder öfters online und könnte die letzten Wochen nicht so wie ich wollte.
Falls noch aktuell ist, dann kurz melden , dann brauche ich nicht ewig zu suchen.
Ich hatte sowas in der schon mal gebaut in der Art , sehe hier
https://basti1012.de/generator/index.php...erator.php

Sowas in der Art etwas geändert sollte dir vielleicht schon helfen, falls ich dich gerade richtig verstehe
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste