Bauen Sie einen Grußkartenhersteller mit Vue Satori

Geschrieben von Dubem Izuorah

Für die kreativen Entwickler da draußen, die ein festliches Projekt suchen, das Ihre Programmierkenntnisse nutzt, erstellen wir eine digitale Feiertagsgrußkarte, die Sie anpassen, Ihr eigenes Foto hinzufügen und sofort herunterladen können. Wir werden einige hochmoderne Webtechnologien verwenden, um dies zu ermöglichen, und nebenbei erfahren Sie etwas über die Grafikerstellung, mehrere coole Pakete und einige nette Vue 3-Tricks.

Was wir bauen werden

Screenshot der Benutzeroberfläche von Holiday Greeting Card Maker

Am Ende dieses Tutorials werden Sie Folgendes haben:

• Eine voll funktionsfähige Web-App zum Erstellen personalisierter Weihnachtskarten
• Praktische Erfahrung mit Vue 3, Nuxt und einigen leistungsstarken Rendering-Bibliotheken
• Ein Verständnis dafür, wie man Grafiken im Browser dynamisch generiert

Projektinitialisierung

Wir verwenden Nuxt 3 als unser Framework, da es ein robustes, batteriebetriebenes Setup für Vue-Anwendungen bietet. Öffnen Sie Ihr Terminal und lassen Sie uns unser Projekt erstellen, indem Sie die folgenden Befehle ausführen:

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Warum Nuxt? Es bietet uns eine solide Grundlage mit integriertem Routing, einfacher Modulintegration und einer insgesamt einfachen Einrichtung. Perfekt für unseren Grußkartenhersteller!

Installieren unseres Toolkits

Jetzt fügen wir die Bibliotheken hinzu, die unsere Kartengenerierungsmagie Wirklichkeit werden lassen. Führen Sie die folgenden Befehle auf Ihrem Terminal aus:

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Lassen Sie mich erläutern, warum wir uns für jedes dieser Produkte entscheiden:

• @vue/server-renderer: Ermöglicht uns das Rendern von Vue-Komponenten und -Requisiten als HTML-Strings – entscheidend für unsere SVG-Generierung
• satori: Konvertiert unseren HTML- und CSS-String in wunderschöne SVG-Grafiken
• Satori HTML: Eine Hilfsbibliothek zum Rendern von HTML-Inhalten, die mit Satori kompatibel sind
• @vueuse/core: Bietet hilfreiche Dienstprogramme wie lokalen Speicher, watchDebounce und viele mehr
• @nuxtjs/tailwindcss: Bietet uns schnelle Styling-Funktionen

Konfigurieren unseres Projekts

Aktualisieren wir unsere nuxt.config.ts, um unsere Entwicklungsumgebung einzurichten:

? nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

Wir deaktivieren das serverseitige Rendering für diese clientseitige App und aktivieren das Tailwind-CSS-Modul. Dadurch erhalten wir ein leichtes, reaktionsfähiges Setup, das perfekt für unseren Grußkartenhersteller geeignet ist.

Codierung unseres Kartenherstellers

Da wir nun alle Vorbereitungen getroffen haben, beginnen wir Schritt für Schritt mit der Erstellung unseres Weihnachtskarten-Makers.

Schritt 1. Implementierung der Card Maker-Schnittstelle

Konzentrieren wir uns zunächst auf die Erstellung eines einfachen Layouts für unseren Kartenersteller. Wir richten ein Formular mit Feldern ein, in denen der Benutzer einen Namen, eine Begrüßung und einen Bild-Upload hinzufügen kann. Wir werden auch einen Vorschaubereich hinzufügen, in dem die Karte angezeigt wird.

So sieht das Grundlayout aus:

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Warum brauchen wir dieses Setup?

1. createSSRApp und renderToString: Rendern Sie Vue-Komponenten in HTML-Strings, indem Sie die Komponente und ihre Requisiten virtuell mounten und ihre endgültige Ausgabe rendern.
2. useLocalStorage: Formulardaten lokal speichern, damit Benutzer beim erneuten Laden nicht den Fortschritt verlieren.
3. watchDebounced: Hilft uns, Leistungsprobleme zu verhindern, indem die Verarbeitung von Benutzereingaben bis zu einer bestimmten Zeit nach Beendigung der Eingabe verzögert wird.
4. satori: Konvertieren Sie HTML in SVG für unsere Grafiken.
5. satori-html: HTML-Strings in ein Format analysieren, das Satori versteht.
6. Die Schriftartenreferenz verwendet useLocalStorage, um die Eingaben des Benutzers beizubehalten. Wenn Sie die Seite aktualisieren, gehen die Formulareingaben nicht verloren und wir können dort fortfahren, wo wir aufgehört haben.
7. Die SVG- und Schriftartvariablen speichern das generierte Kartendesign und die geladenen Schriftartdaten.

Schritt 3. Erstellen der Kartenvorlage

Als nächstes erstellen wir die Kartenvorlagenkomponente, die wir zuvor importiert haben. Hier geschieht die Magie.

Wir verwenden die Daten aus dem Formular, um die Karte zu personalisieren. In „components/ChristmasCard.vue“ entwerfen wir die visuelle Vorlage unserer Karte. Stellen Sie sich das so vor, als würden Sie eine Leinwand entwerfen, auf der Benutzer ihre Begrüßung personalisieren können.

? components/ChristmasCard.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Aufschlüsselung:

• Wir verwenden den onMounted-Hook, der in Nuxt 3 automatisch importiert wird, um die Schriftarten zu laden und zu speichern, die zum Generieren der Grafiken benötigt werden.
• Sie können jede beliebige TTF-Schriftartdatei verwenden. Um die gleiche Schriftart zu erhalten, die ich verwendet habe, die Schriftart „Instrument Sans“, besuchen Sie Google Fonts, klicken Sie auf „Schriftart abrufen“ und laden Sie dann die Schriftartdateien herunter. Extrahieren Sie die ZIP-Datei und kopieren Sie die .ttf-Schriftart (z. B. InstrumentSans-Regular.ttf) in den Ordner public/fonts Ihres Nuxt-Projekts. Referenzieren Sie es als /fonts/InstrumentSans-Regular.ttf in Ihrem Code.
• In onMounted rufen wir „refreshGraphics“ auf, um die ersten SVG-Grafiken zu generieren, sobald die Schriftart geladen wurde.
• Wir verwenden watchDebounced, um Änderungen im Formular zu verfolgen und die Grafiken 500 ms nach der letzten Aktualisierung zu aktualisieren. Hinweis: Dies ist ein Leistungstrick.
• Die Funktion „loadFonts“ lädt die erforderlichen Schriftarten alle auf einmal mithilfe von Promise.all statt nacheinander. Ein weiterer Performance-Trick, den Sie beachten sollten.

Schritt 5. SVG aus Vue-Komponente generieren

Hier verbinden wir alles. Wir konvertieren die ChristmasCard-Komponente in ein SVG.

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Lassen Sie mich erklären:

• Wir verwenden zunächst die Dienstprogrammfunktion renderToHTML, um die zuvor importierte ChristmasCard.vue-Komponente in einen HTML-String zu konvertieren
• Dann verwenden wir die zuvor aus satori-html importierte HTML-Funktion, um die HTML-Zeichenfolge in ein Markup-Format zu konvertieren, das vom Satori-Paket akzeptiert wird
• Zuletzt rufen wir Satori auf und übergeben dabei die Markup-, Breiten- und Höhenkonfiguration sowie die Schriftarten, die wir zuvor im onMounted-Hook geladen haben
• Die resultierende SVG-Zeichenfolge wird in der Referenz „svg.value“ gespeichert, die wir im Vorlagenabschnitt app.vue verwendet haben, um die SVG-Datei im Ansichtsfenster anzuzeigen. Siehe im Abschnitt „Vorlagen“

Schritt 6. Dienstprogrammfunktionen

Lassen Sie uns alles zusammenfassen, woran wir gearbeitet haben, indem wir einige wichtige Hilfsfunktionen für unsere Code- und Vorlagenfunktionen hinzufügen.

Unterstützung für das Hochladen von Bildern hinzufügen

Wir fügen Funktionen zum Hochladen von Bildern hinzu. Dadurch wird sichergestellt, dass Benutzer ein Bild auswählen, prüfen können, ob es innerhalb der Größenbeschränkung (100 KB) liegt, und es anzeigen können.

Fügen Sie dies unter dem RefreshGraphics-Code ein:

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Warum die Dateigröße überprüfen? Wir begrenzen die Dateigröße, um eine reibungslose Leistung zu gewährleisten. Alles, was größer ist, könnte die Geschwindigkeit verlangsamen, daher ist 100 KB eine sichere Obergrenze.

Konvertieren einer Vue-Komponente in einen HTML-String

Als nächstes rendern wir die Vue-Komponente als HTML-String. Dadurch können wir Vue für serverseitiges Rendering, E-Mail-Vorlagen oder die Generierung statischer Websites verwenden. In diesem Fall dient es der Generierung einer Grußkartenvorlage. Fügen wir dies auch zu unserem Code hinzu.

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

Erläuterung:

• createSSRApp: Diese Funktion wird verwendet, um eine serverseitig gerenderte (SSR) Vue-Anwendungsinstanz zu erstellen, die in eine HTML-Zeichenfolge gerendert werden kann.
• renderToString: Dies rendert die Vue-Komponente (GreetingCard) in einen HTML-String und übergibt alle von der Komponente benötigten Requisiten.

Herunterladen der Karte als JPEG

Zuletzt fügen wir Code hinzu, der es uns ermöglicht, unsere Karte als JPEG herunterzuladen.

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

Warum funktioniert das? Mithilfe der HTML-Canvas-API können wir das SVG auf die Leinwand zeichnen und es zum einfachen Herunterladen in ein JPEG konvertieren. Es ist eine schnelle und effiziente Möglichkeit, Bilddateien aus Vektorgrafiken zu generieren.

Schritt 7. Styling

Um sicherzustellen, dass das SVG-Element im Container korrekt angezeigt wird, müssen wir etwas CSS-Stil anwenden. Da die generierte SVG-Datei eine feste Größe von 1080 x 1080 Pixel hat, der übergeordnete Container jedoch kleiner ist, müssen wir die SVG-Datei so skalieren, dass sie ohne Verzerrung in den Container passt.

? app.vue

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

Diese CSS-Regel stellt sicher, dass die Größe des SVG-Elements innerhalb des .banner-here-Div so geändert wird, dass es den verfügbaren Platz ausfüllt und gleichzeitig sein Seitenverhältnis beibehält.

Inzwischen sollte Ihr Projekt in etwa wie dieser Screenshot aussehen. Lassen Sie es uns ausführen, um die wahre Magie zu sehen!

Ausführen unseres Codes

Um unsere App in Aktion zu sehen, führen Sie den folgenden Befehl aus und öffnen Sie http://localhost:3000 in Ihrem Browser.

Als Referenz finden Sie hier das Github-Repo für dieses Tutorial.

<template>
  <div>



<p><strong>So what’s happening here?</strong></p>

<ol>
<li>
<strong>Card Preview:</strong> The  with v-html="svg" is where our card will appear as an SVG once it’s generated.
</li>
<li><strong>Form Fields:</strong></li>


<ul>
<li>Two text fields: name and greeting. These will dynamically update the card when the user types.</li>
<li>File input: Allows users to upload an image.</li>
</ul>

<ol>
<li>
<strong>File Restrictions:</strong> The small tag below the file input informs users about allowed file size and formats. Large images can slow down rendering, so we’re capping the size at 100KB.</li>
<li>
<strong>Download Button:</strong> This triggers the downloadSvgAsJpeg function, which saves the card as a JPEG image.</li>
</ol>

<h3>
  
  
  Step 2. Setting up Dependencies
</h3>

<p>Now let’s set up the logic and install the packages needed to power our Holiday Card Maker. Let’s import a few packages that will make things easier for us.</p>

<p>? <strong>app.vue</strong><br>
</p>

<pre class="brush:php;toolbar:false">...
</template>

<script setup lang="ts">
import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import { useLocalStorage, watchDebounced } from "@vueuse/core";
import satori from "satori";
import { html } from "satori-html";
import ChristmasCard from "./components/ChristmasCard.vue";
const form = useLocalStorage("app-form", {
  name: "",
  greeting: "Merry Christmas",
  photo: null,
});
const svg = ref("");
const fonts = ref([]);
...
</script>

Sie sollten etwas sehen, das der Schnittstelle im GIF oben ähnelt. Sie können die Details bearbeiten, ein Bild hinzufügen und Ihr Bild herunterladen. Glückwunsch! Sie haben jetzt Ihren eigenen persönlichen Weihnachtskarten-Ersteller.

Zusammenfassung

Sie haben gerade einen personalisierten Grußkarten-Ersteller erstellt! ? Aber hören Sie hier nicht auf. Experimentieren Sie mit verschiedenen Designs, fügen Sie weitere Anpassungsoptionen hinzu oder erstellen Sie sogar Karten für andere Anlässe.

Einige Ideen zur Erweiterung Ihres Projekts:

• Weitere Hintergrundthemen hinzufügen
• Textfarbe/Schriftartauswahl einbeziehen
• Erstellen Sie Vorlagen für Geburtstage und Jubiläen

Möchten Sie auf Kundenseite mehr tun? Erfahren Sie in diesem Artikel, wie Sie 3D-Objekte im Browser rendern.

Ursprünglich veröffentlicht unter https://www.vuemastery.com am 19. Dezember 2024.

---

Das obige ist der detaillierte Inhalt vonBauen Sie einen Grußkartenhersteller mit Vue Satori. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!