Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses

Die hier verwendeten Technologien sind:

• HTML+ CSS+ JavaScript;
• download.js-Bibliothek;
• fabric.js-Bibliothek;

Gehen Sie zuerst zum Erlebnislink: g.cuggz.com/.​

Hinweis: Sie können auf den obigen Link klicken, um ihn zu verwenden, aber mein Domänenname wurde von TX blockiert und ich lege immer noch Einspruch ein, sodass ich ihn nicht in QQ oder WeChat öffnen kann. Sie müssen den Link in den Browser kopieren, um ihn anzuzeigen und zu verwenden.​

Hier ist ein Screenshot des Gadgets:

1. Seitenlayout

Zu diesem Teil werde ich nicht viel sagen, sondern direkt zum Code gehen:

<div Klasse="Wrapper">
    <!-- Auswahlfeld -->
    <div Klasse="Hauptbox">
      <a class="prev" onClick='changeHat()'></a>
      <div Klasse="Haupt-Bild">
        <div id="Inhalt">
          <Leinwand-ID='cvs'></Leinwand>
        </div>
      </div>
      <a class="next" onClick='changeHat()'></a>
    </div>
    <!-- Diagramm exportieren -->
    <img id='export-img' alt='Exklusiver Avatar zum Nationalfeiertag' src='' crossorigin="anonymous"/>
    <!-- Aktionsschaltfläche -->
    <div Klasse="operation-btns">
      <a Klasse="Upload-btn">
        <Eingabe-ID='Hochladen' Typ='Datei' Onchange='Viewer()' Stil='Deckkraft: 0;'/>
      </a>
      <a Klasse = "export-btn" bei Klick = "exportFunc()"></a>
    </div>
  </div>
 <!-- Vorlage -->
  <div Stil='Anzeige: keine'>
    <img id='img' src='' alt='' />
    <img Klasse = "ausblenden" id = "hat0" src = "img/1.png" />
    <img Klasse = "ausblenden" id = "hat1" src = "img/2.png" />
    <img class='ausblenden' id='hat2' src='img/3.png' />
    <img class='ausblenden' id='hat3' src='img/4.png' />
    <img class='ausblenden' id='hat4' src='img/5.png' />
    <img class='ausblenden' id='hat5' src='img/6.png' />
    <img class='hide' id='hat6' src='img/7.png' />
  </div>

Diese Seite ist relativ einfach. Auf der Außenseite befindet sich ein großes Hintergrundbild, in der Mitte ein Avatar-Anzeigefeld und eine Schaltfläche zum Wechseln der Vorlage sowie darunter eine Schaltfläche zum Hochladen und eine Schaltfläche zum Herunterladen. Nachdem das Seitenlayout abgeschlossen ist, ist es Zeit, den Stil zu schreiben. Der CSS-Code lautet wie folgt:

Körper,
html {
    Mindesthöhe: 100 %;
    Breite: 100 %;
    Benutzerauswahl: keine;
    Schriftgröße: 18px;
}

.wrapper {
    Breite: 100 %;
    Höhe: 100%;
    maximale Breite: 620px;
    maximale Höhe: 800px;
    Rand: 0 automatisch;
    Hintergrundbild: url('../img/bg.png');
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 100 % 100 %;
    Polsterung oben: 13em;
}

#export-img {
    Anzeige: keine;
    Rand: 0 automatisch;
    Breite: 250px;
    Höhe: 250px;
}

.Hauptbox {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}

.Hauptbox .Weiter,
.Hauptbox .vorher {
    Hintergrundbild: URL('../img/next.png');
    Hintergrundgröße: enthalten;
    Randradius: 50 %;
    Breite: 2,275rem;
    Höhe: 2.275rem
}

.Hauptbox .vorher {
    transformieren: drehen (180 Grad)
}

.Hauptbox .Hauptbild {
    Rand: 0,75rem;
    Hintergrund: #fff;
    Rand: .25rem durchgezogen #fbe6b5;
    Randradius: .75rem;
    Schriftgröße: 0
}

#Inhalt {
    Randradius: .5rem;
    Position: relativ;
    Breite: 9,5rem;
    Höhe: 9,5rem;
    Rand links: 50 %;
    transformieren: übersetzenX(-50%);
    Überlauf: versteckt
}

.operation-btns {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Flex-Richtung: Spalte;
    Rand oben: .75rem
}

.operation-btns .upload-btn {
    Breite: 11,6rem;
    Höhe: 3,6rem;
    Hintergrundgröße: 100 % 100 %;
    Hintergrundbild: URL('../img/upload.png')
}

.operation-btns .export-btn {
    Anzeige: keine;
    Breite: 11,6rem;
    Höhe: 3,75rem;
    Hintergrundgröße: 100 % 100 %;
    Hintergrundbild: URL('../img/export.png')
}

Hier ist nur eine einfache Implementierung, die nur als Referenz dient. Es gibt noch viele Bereiche, die optimiert werden können und die hier nicht geändert werden. Wer möchte, kann sie selbst anpassen.

2. Bild-Upload und Anzeige

Der nächste Schritt besteht darin, den Logikteil zu implementieren. Zunächst müssen mehrere globale Variablen definiert werden, die später verwendet werden:

let canvasFabric; // Canvas-Instanz let hat = "hat0"; // Aktuelle Vorlagenklasse
let hatInstance; // Instanz der Vorlagenebene const screenWidth = document.getElementById("content").scrollHeight; // Höhe des Inhaltsfelds

Danach müssen wir das hochgeladene Bild verarbeiten und auf der Seite anzeigen:

Funktion Betrachter() {
  // Hochgeladene Bilddatei abrufen const file = document.getElementById("upload").files[0];
  // Holen Sie sich das Tag, das das Bild anzeigen muss const img = document.getElementById("img");
  // Erstellen Sie eine Datei zum Lesen des Dateiobjekts const reader = new FileReader();
  if (Datei) {
    //Konvertiere die Datei in Base64
    reader.readAsDataURL(Datei);
    // Wird ausgelöst, wenn die Datei erfolgreich gelesen wurde reader.onload = () => {
      // Weisen Sie dem Tag, in dem das Bild angezeigt werden soll, die Base64-URL zu. img.src = reader.result;
      // Bild wurde geladen, Trigger img.onload = () => img2Cvs(img);
    }
  } anders {
    img.src = ""
  }
}

Zum Einsatz kommt hierbei das HTML5 FileReader Objekt, welches Methoden zum Einlesen von Dateien bereitstellt sowie ein Eventmodell, welches die Leseergebnisse enthält. Mit new können Sie das Objekt initialisieren. Das FileReader Objekt enthält vier Methoden, von denen drei zum Lesen von Dateien und eine zum Unterbrechen des Lesevorgangs verwendet werden. Es ist zu beachten, dass die Methode unabhängig davon, ob das Lesen erfolgreich ist oder fehlschlägt, das Leseergebnis nicht zurückgibt, sondern im result gespeichert wird. Hier wird die Methode readAsDataURL verwendet. MDN beschreibt diese Methode wie folgt:

Die Methode readAsDataURL liest das angegebene Blob- oder Dateiobjekt. Wenn der Lesevorgang abgeschlossen ist, ändert sich readyState in DONE und loadend (en-US) -Ereignis wird ausgelöst. Gleichzeitig enthält das result-Attribut eine Zeichenfolge im Format data: URL (base64-codiert), um den Inhalt der gelesenen Datei darzustellen.

Das heißt, das hochgeladene Bild wird in eine URL im Base64 Format umgewandelt und dem Tag zugewiesen, der das Bild anzeigt, sodass der Tag den Avatar anzeigt. Der Effekt ist wie folgt:

Damit ist das Hochladen und Anzeigen des Bildes abgeschlossen. Als Nächstes ist es an der Zeit, eine Leinwand zu initialisieren.

3. Initialisieren Sie die Leinwand

Am Ende des obigen Codes wird img.load ausgeführt. Das Onload-Ereignis wird hier unmittelbar nach dem Laden des Bildes ausgeführt. Nachdem das Bild angezeigt wurde, wird die Methode img2Cvs ausgeführt. Diese Methode wird hauptsächlich verwendet, um eine Leinwand zu initialisieren und einige Elemente der Seite anzuzeigen und auszublenden.

Die fabric -Bibliothek wird in der img2Cvs Methode verwendet. Fabric.js ist eine Bibliothek, die das Schreiben Canvas Programmen vereinfachen kann. Fabric.js bietet das fehlende Objektmodell, den SVG-Parser, die Interaktion und eine ganze Reihe anderer unverzichtbarer Tools für Canvas . Canvas bietet gute Canvas-Funktionen, aber die API ist nicht benutzerfreundlich genug. Fabric.js wurde zu diesem Zweck entwickelt und verwendet hauptsächlich Objekte zum Schreiben von Code. Fabric.js kann Folgendes:

• Erstellen und füllen Sie Grafiken auf Canvas (einschließlich Bilder, Text, normale Grafiken und Grafiken, die aus komplexen Pfaden bestehen).
• Füllen Sie die Form mit einer Verlaufsfarbe.
• Kombinierte Grafiken (einschließlich kombinierter Grafiken, Grafiktext, Bilder usw.).
• Richten Sie grafische Animationen ein, um Benutzerinteraktionen festzulegen.
• Generieren Sie JSON-, SVG-Daten usw.
• Das generierte Canvas-Objekt verfügt über eine Drag-and-Drop-Funktionalität.

Sie können die Bibliothek fabric.js über den npm-Befehl installieren:

npm installiere Fabric --save

Sie können es auch über CDN referenzieren:

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

Schauen wir uns an, wie die Methode img2Cvs implementiert wird:

Funktion img2Cvs(img) {
   // Leinwand abrufen und anzeigen und die Leinwandgröße auf die Größe des Bildes einstellen const cvs = document.getElementById("cvs");
    cvs.width = Bildbreite;
    cvs.height = img.height;
    cvs.style.display = "Block";
   
   // Erstellen Sie eine Leinwand und legen Sie ihre Position und ihr Hintergrundbild fest canvasFabric = new fabric.Canvas("cvs", {
      Breite: Bildschirmbreite,
      Höhe: Bildschirmbreite,
      Hintergrundbild: neues Stoffbild (Bild, {
        scaleX: Bildschirmbreite / Bildbreite,
        scaleY: Bildschirmbreite / Bildhöhe
      })
    });
   // Vorlage wechseln changeHat();
  // Schaltfläche zum Hochladen des Bilds ausblenden und Schaltfläche zum Herunterladen des Bilds anzeigen document.getElementsByClassName("upload-btn")[0].style.display = "none";
    document.getElementsByClassName("export-btn")[0].style.display = "block";
  }

fabric.Canvas() hat hier zwei Parameter. Der erste Parameter ist canvas -ID und der zweite Parameter ist das Konfigurationselement beim Initialisieren des Canvas. Hier legen wir die anfängliche Canvas-Größe und das Hintergrundbild fest und verwenden den Avatar, den wir hochgeladen haben, als Hintergrundbild. Das Hintergrundbild ist hier ein instantiiertes fabric.Image-Objekt. Der erste Parameter des Objekts ist bei der Initialisierung das Bildobjekt und der zweite Parameter ist das Stileinstellungskonfigurationsobjekt des Bilds.​

Nachdem Sie die Leinwand erstellt haben, müssen Sie zur ersten Vorlage wechseln, die Schaltfläche zum Hochladen des Bildes ausblenden und die Schaltfläche zum Herunterladen des Avatars anzeigen. Damit ist der erste Schritt abgeschlossen. Sehen wir uns nun an, wie vorhandene Vorlagen gewechselt werden.

4. Vorlage wechseln

Als Nächstes sehen wir uns an, wie Sie zwischen Vorlagen wechseln:

Funktion changeHat() {
   // Aktuelle Vorlage ausblenden document.getElementById(hat).style.display = "none";
   // Alle Vorlagen abrufen const hats = document.getElementsByClassName("hide");
    Hut = "Hut" + (+Hut.replace("Hut", "") + 1) % Hüte.Länge;
   // Aktuelle Vorlage abrufen und anzeigen const hatImage = document.getElementById(hat);
    hatImage.style.display = "Block";
   // Wenn eine Ebene aktuell existiert, entfernen Sie sie if (hatInstance) {
      canvasFabric.entfernen(hatInstance)
    }
   // Füge die aktuelle Vorlage als Layer-Objekt hinzu hatInstance = new fabric.Image(hatImage, {
      oben: 0,
      links: 0,
      scaleX: Bildschirmbreite / Hutbild.Breite,
      scaleY: Bildschirmbreite / Hutbild.Höhe,
      Eckfarbe: "#0b3a42",
      Eckstrichfarbe: "#fff",
      Eckstil: "Kreis",
      transparentCorners: false,
      rotierenderPunktversatz: 30
    });
   // Legen Sie fest, dass das Layer-Objekt nicht dehnbar ist. hatInstance.setControlVisible({
       mt: falsch, 
       mb: falsch, 
       ml: falsch, 
       herr: falsch, 
       bl: falsch, 
       br: falsch, 
       tl: falsch, 
       tr: falsch, 
       mtr: falsch, 
    })
   // Fügen Sie die Ebene zur Leinwand hinzu canvasFabric.add(hatInstance);
  }

Standardmäßig verfügen fabric.js-Elemente über acht Punkte zum Skalieren von Objekten. Hier möchten wir nicht, dass Benutzer fabric Objekt horizontal oder vertikal strecken. Wir können es mit setControlsVisibility() so einstellen, dass es nicht dehnbar ist. Diese Methode erfordert die Übergabe eines Konfigurationsobjekts, das acht Skalierungspunkte enthält, die alle auf false gesetzt sind.​

Schließlich fügen wir die von der Vorlage generierte Ebene zur Leinwand hinzu. Hier verwenden wir die Add-Methode, die ein von Fabric bereitgestelltes Ereignis ist. Im Folgenden sind die allgemeinen Ereignisse aufgeführt, die offiziell von Fabric.js bereitgestellt werden:

• object:added hinzufügen
• object:modified Editierebene
• object:removed
• selection:created Die erste ausgewählte Ebene
• selection:updated Änderungen an der Layerauswahl
• Auswahl selection:cleared Löscht die ausgewählte Ebene
  

5. Bild ausgeben

Nach den obigen Schritten haben wir eine Leinwand initialisiert. Der Hintergrund der Leinwand ist das Bild, das wir hochgeladen haben. Auf der Leinwand befindet sich außerdem eine Ebene, nämlich die von uns gewählte Vorlage. Der letzte Schritt besteht darin, das synthetisierte Bild auszugeben. Sehen wir uns an, was passiert, wenn Sie auf die Schaltfläche „Bild herunterladen“ klicken:

Funktion exportFunc() {
  // Auswahlfeld, Upload- und Download-Buttons und Canvas ausblenden document.getElementsByClassName("main-box")[0].style.display = "none";
  document.getElementsByClassName("operation-btns")[0].style.display = "keine";
  document.getElementById("cvs").style.display = "keine";

  // URL aus dem Canvas generieren und dem entsprechenden Tag zur Anzeige zuweisen const exportImage = document.getElementById("export-img");
  exportImage.style.display = "Block";
  exportImage.src = canvasFabric.toDataURL({
    Breite: Bildschirmbreite,
    Höhe: Bildschirmbreite
  });
  // Laden Sie das generierte Bild herunter window.confirm("Möchten Sie den Avatar herunterladen") ? download(exportImage.src, "National Day avatar", 'image/png') : void 0
}

Hier verwenden wir die Methode toDataURL , um ein Bild aus dem Canvas-Instanzobjekt zu generieren. Dies ist eine Methode des fabric -Objekts, die das Canvas als Bild exportieren und eine URL im Base64 Format exportieren kann. Auf diese Weise kann das img-Tag nach dem Abrufen der URL das endgültige Bild anzeigen.​

Zum Schluss wird noch eine optionale Funktion hinzugefügt, die den generierten Avatar herunterladen soll. Dabei kommt die Bibliothek download.js zum Einsatz. Der erste Parameter dieser Methode ist die URL des Bildes, der zweite Parameter der Name des heruntergeladenen Bildes und der dritte Parameter das Format des Bildes.​

Dies sind alle Funktionen dieser kleinen Anwendung. Es ist nur eine einfache Implementierung und es gibt noch einen Fehler. Es bietet hauptsächlich eine Implementierungsidee. Da ich vorher noch nie mit dem Konzept einer Leinwand in Berührung gekommen war, habe ich dieses Mal eine Menge gelernt. Ich werde in Zukunft mehr über seine Verwendung lernen, wenn ich Zeit habe, interesting !​

Damit ist dieser Artikel über den Nationalfeiertag abgeschlossen. Er enthält die Verwendung von JS zur Implementierung eines Tools zum Generieren von Avataren im Stil des Nationalfeiertags sowie den detaillierten Implementierungsprozess. Weitere verwandte Inhalte zur Verwendung von JS zum Generieren von Avataren im Stil des Nationalfeiertags finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den unten aufgeführten verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!