Bina Pembuat Kad Ucapan dengan Vue Satori

Ditulis oleh Dubem Izuorah

Bagi pembangun kreatif di luar sana yang mencari projek perayaan yang memanfaatkan kemahiran pengekodan anda, mari bina Kad Ucapan Percutian digital yang boleh anda sesuaikan, tambah foto anda sendiri dan muat turun serta-merta. Kami akan menggunakan beberapa teknologi web yang canggih untuk menjayakan perkara ini, dan sepanjang perjalanan, anda akan belajar tentang penjanaan grafik, beberapa pakej hebat dan beberapa helah Vue 3 yang kemas.

Apa yang akan kita bina

Tangkapan skrin antara muka Pembuat Kad Ucapan Percutian

Menjelang akhir tutorial ini, anda akan mempunyai:

• Apl web berfungsi sepenuhnya untuk mencipta kad percutian yang diperibadikan
• Pengalaman langsung dengan Vue 3, Nuxt dan beberapa perpustakaan pemaparan yang hebat
• Pemahaman tentang cara menjana grafik secara dinamik dalam penyemak imbas

Permulaan Projek

Kami akan menggunakan Nuxt 3 sebagai rangka kerja kami kerana ia menyediakan persediaan yang teguh, termasuk bateri untuk aplikasi Vue. Buka terminal anda dan mari buat projek kami dengan menjalankan arahan di bawah:

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

Kenapa Nuxt? Ia memberi kami asas yang kukuh dengan penghalaan terbina dalam, penyepaduan modul yang mudah dan persediaan mudah secara keseluruhan. Sesuai untuk pembuat kad ucapan kami!

Memasang Kit Alat Kami

Sekarang, kami akan menambah perpustakaan yang akan menjadikan keajaiban penjanaan kad kami berlaku. Jalankan arahan berikut pada terminal anda:

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

Biar saya rungkaikan sebab kami memilih setiap satu daripada ini:

• @vue/server-renderer: Membolehkan kami memaparkan komponen & prop Vue sebagai rentetan HTML - penting untuk penjanaan SVG kami
• satori: Menukar rentetan HTML dan CSS kami kepada grafik SVG yang cantik
• Satori HTML: Pustaka pembantu untuk memaparkan kandungan HTML yang serasi dengan Satori
• @vueuse/core: Menyediakan utiliti yang berguna seperti storan tempatan, watchDebounce dan banyak lagi
• @nuxtjs/tailwindcss: Memberi kami keupayaan penggayaan pantas

Mengkonfigurasi Projek kami

Mari kemas kini nuxt.config.ts kami untuk menyediakan persekitaran pembangunan kami:

? nuxt.config.ts

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

Kami melumpuhkan pemaparan sebelah pelayan untuk apl sebelah pelanggan ini dan mendayakan modul CSS Tailwind. Ini memberikan kami persediaan yang ringan dan responsif yang sesuai untuk pembuat kad ucapan kami.

Mengekodkan Pembuat Kad kami

Sekarang kita semua telah bersedia, mari kita selami dalam membuat Pembuat Kad Percutian kami langkah demi langkah.

Langkah 1. Melaksanakan Antara Muka Pembuat Kad

Mula-mula kita fokus pada mencipta reka letak yang ringkas untuk pembuat kad kami. Kami akan menyediakan borang dengan medan untuk pengguna menambah nama, sapaan dan muat naik imej. Kami juga akan menambah kawasan pratonton tempat kad akan dipaparkan.

Begini rupa reka letak asas:

? app.vue

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

Mengapa kita memerlukan persediaan ini?

1. createSSRApp dan renderToString : Render komponen Vue ke rentetan HTML dengan secara maya melekapkan komponen dan propnya dan memaparkan output akhirnya.
2. useLocalStorage : Simpan data borang secara setempat, jadi pengguna tidak kehilangan kemajuan jika mereka memuat semula.
3. watchDebounced : Membantu kami mencegah isu prestasi dengan melambatkan pemprosesan input pengguna sehingga tempoh tertentu selepas penaip berhenti.
4. satori : Tukar HTML kepada SVG untuk grafik kami.
5. satori-html : Menghuraikan rentetan HTML ke dalam format yang difahami oleh satori.
6. Fon ref menggunakan useLocalStorage untuk mengekalkan input pengguna. Jika anda memuat semula halaman, kami tidak akan kehilangan input borang dan boleh meneruskan ke tempat yang kami tinggalkan.
7. Pembolehubah svg dan fon akan menyimpan reka bentuk kad yang dijana dan data fon yang dimuatkan.

Langkah 3. Mencipta Templat Kad

Seterusnya, mari buat komponen templat kad yang kami import sebelum ini. Di sinilah keajaiban berlaku.

Kami akan menggunakan data daripada borang untuk memperibadikan kad. Dalam komponen/ChristmasCard.vue, kami akan mereka bentuk templat visual kad kami. Fikirkan ini seperti mereka bentuk kanvas yang membolehkan pengguna memperibadikan ucapan mereka.

? komponen/ChristmasCard.vue

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

Memecahkannya:

• Kami menggunakan cangkuk onMounted, yang diimport secara automatik dalam Nuxt 3, untuk memuatkan dan menyimpan fon yang diperlukan untuk menjana grafik.
• Anda boleh menggunakan mana-mana fail fon .ttf. Untuk mendapatkan fon yang sama yang saya gunakan, fon "Instrument Sans", lawati Fon Google, klik "Dapatkan Fon," kemudian muat turun fail fon. Ekstrak fail ZIP dan salin fon .ttf (cth., InstrumentSans-Regular.ttf) ke dalam folder awam/fon projek Nuxt anda. Rujuknya sebagai /fonts/InstrumentSans-Regular.ttf dalam kod anda.
• Di dalam onMounted, kami memanggil refreshGraphics untuk menjana grafik SVG awal setelah fon dimuatkan.
• Kami menggunakan watchDebounced untuk menjejaki perubahan dalam borang dan mengemas kini grafik 500ms selepas kemas kini terakhir. Nota: ini ialah helah prestasi.
• Fungsi loadFonts memuatkan fon yang diperlukan sekaligus menggunakan Promise.all dan bukannya secara berurutan. Satu lagi helah prestasi yang perlu diperhatikan.

Langkah 5. Menjana SVG daripada Komponen Vue

Di sinilah kami mengikat segala-galanya bersama-sama. Kami akan menukar komponen ChristmasCard kepada SVG.

? app.vue

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

Biar saya jelaskan:

• Kami mula-mula menggunakan fungsi utiliti renderToHTML untuk menukar komponen ChristmasCard.vue yang diimport lebih awal kepada rentetan HTML
• Kemudian kami menggunakan fungsi html yang diimport dari satori-html tadi untuk menukar rentetan HTML ke dalam format markup yang boleh diterima oleh pakej satori
• Akhir sekali, kami memanggil satori, memasukkan penanda, konfigurasi lebar dan ketinggian serta fon yang kami muatkan sebelum ini dalam cangkuk onMounted
• Rentetan svg yang terhasil disimpan dalam ref svg.value, yang kami gunakan dalam bahagian templat app.vue untuk memaparkan svg pada viewport. Lihat di bahagian templat

Langkah 6. Fungsi Utiliti

Mari kita selesaikan semua yang telah kita usahakan dengan menambahkan beberapa fungsi utiliti penting untuk ciri kod dan templat kami.

Menambah Sokongan Muat Naik Imej

Kami menambah fungsi untuk mengendalikan muat naik imej. Ini akan memastikan pengguna boleh memilih imej, menyemak sama ada ia berada dalam had saiz (100KB) dan memaparkannya.

Tampal ini di bawah kod refreshGraphics:

? app.vue

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

Mengapa menyemak saiz fail? Kami mengehadkan saiz fail untuk memastikan prestasi lancar. Apa-apa sahaja yang lebih besar boleh memperlahankan keadaan, jadi 100KB ialah had atas yang selamat.

Menukar komponen Vue kepada rentetan HTML

Seterusnya, kami akan menjadikan komponen Vue sebagai rentetan HTML. Ini membolehkan kami menggunakan Vue untuk pemaparan sebelah pelayan, templat e-mel atau penjanaan tapak statik. Dalam kes ini, ia adalah untuk menjana templat kad ucapan. Mari tambahkan ini juga pada kod kami.

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

Penjelasan:

• createSSRApp : Fungsi ini digunakan untuk mencipta contoh aplikasi Vue yang diberikan sebelah pelayan (SSR), yang boleh dipaparkan kepada rentetan HTML.
• renderToString : Ini menjadikan komponen Vue (GreetingCard) kepada rentetan HTML, menghantar sebarang prop yang diperlukan oleh komponen tersebut.

Memuat turun Kad sebagai JPEG

Akhir sekali, mari tambah kod yang membolehkan kami memuat turun kad kami sebagai JPEG.

? app.vue

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

Mengapa ini berfungsi? Dengan menggunakan HTML Canvas API, kami boleh melukis SVG pada kanvas dan menukarnya kepada JPEG untuk muat turun mudah. Ini cara yang cepat dan cekap untuk menjana fail imej daripada grafik vektor.

Langkah 7. Penggayaan

Untuk memastikan elemen SVG dipaparkan dengan betul dalam bekas, kami perlu menggunakan beberapa penggayaan CSS. Memandangkan SVG yang dijana mempunyai saiz tetap 1080px kali 1080px, tetapi bekas induk lebih kecil, kita perlu menskalakan SVG agar muat di dalam bekas tanpa herotan.

? app.vue

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

Peraturan CSS ini memastikan bahawa elemen SVG di dalam div .banner-here diubah saiz untuk mengisi ruang yang tersedia sambil mengekalkan nisbah bidangnya.

Sekarang, projek anda sepatutnya kelihatan seperti tangkapan skrin ini. Mari jalankan untuk melihat keajaiban sebenar!

Menjalankan kod kami

Untuk melihat apl kami dalam tindakan, jalankan arahan di bawah dan buka http://localhost:3000 pada penyemak imbas anda.

Untuk rujukan, berikut ialah repo Github untuk tutorial ini.

<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>

Anda sepatutnya melihat sesuatu yang menyerupai antara muka dalam GIF di atas. Anda boleh mengedit butiran, menambah imej dan memuat turun imej anda. tahniah! Anda kini mempunyai pembuat Kad Percutian peribadi anda sendiri.

Membungkus

Anda baru sahaja membina pembuat kad ucapan yang diperibadikan! ? Tetapi jangan berhenti di sini. Eksperimen dengan reka bentuk yang berbeza, tambah lebih banyak pilihan penyesuaian atau buat kad untuk majlis lain.

Beberapa idea untuk mengembangkan projek anda:

• Tambah lebih banyak tema latar belakang
• Sertakan warna teks/pilihan fon
• Buat templat untuk hari lahir, ulang tahun

Ingin melakukan lebih banyak perkara di sisi pelanggan? Temui cara untuk memaparkan objek 3d dalam penyemak imbas dengan membaca artikel ini.

Asalnya diterbitkan di https://www.vuemastery.com pada 19 Disember 2024.

---

Atas ialah kandungan terperinci Bina Pembuat Kad Ucapan dengan Vue Satori. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!