使用 Vue Satori 建構賀卡製作工具-js教程-PHP中文網

Build a Greeting Card Maker w/ Vue Satori

作者 Dubem Izuorah

對於尋求利用您的編碼技能的節日專案的創意開發人員，讓我們建立一個數位節日賀卡，您可以自訂它、添加您自己的照片並立即下載。我們將使用一些尖端的 Web 技術來實現這一目標，在此過程中，您將了解圖形生成、幾個很酷的軟體包以及一些簡潔的 Vue 3 技巧。

我們將要建造什麼

Build a Greeting Card Maker w/ Vue Satori

節慶賀卡製作介面截圖

在本教學結束時，您將擁有：

用於創建個人化節日賀卡的功能齊全的網路應用程式
Vue 3、Nuxt 和一些強大的渲染庫的實作經驗
了解如何在瀏覽器中動態產生圖形

專案初始化

我們將使用 Nuxt 3 作為我們的框架，因為它為 Vue 應用程式提供了強大的、包含電池的設定。打開終端，讓我們透過執行以下命令來創建我們的專案：

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

登入後複製

為什麼選擇 Nuxt？它為我們提供了內建路由、簡單模組整合和整體簡單設定的堅實基礎。非常適合我們的賀卡製作者！

安裝我們的工具包

現在，我們將添加庫，使我們的卡片生成魔法得以實現。在終端機上執行以下命令：

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

登入後複製

讓我來解釋一下我們選擇其中每一個的原因：

@vue/server-renderer：允許我們將 Vue 元件和 props 渲染為 HTML 字串 - 對於我們的 SVG 生成至關重要
satori：將 HTML 和 CSS 字串轉換為漂亮的 SVG 圖形
Satori HTML：用於渲染與 Satori 相容的 HTML 內容的輔助函式庫
@vueuse/core：提供有用的實用程序，例如本地儲存、watchDebounce 等等
@nuxtjs/tailwindcss：提供我們快速的樣式設計能力

配置我們的項目

讓我們更新 nuxt.config.ts 設定我們的開發環境：

？ nuxt.config.ts

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

登入後複製

我們將停用此客戶端應用程式的伺服器端渲染並啟用 Tailwind CSS 模組。這為我們提供了一個輕量級、響應式的設置，非常適合我們的賀卡製作者。

編寫我們的卡片製作工具

現在我們已經完成所有設置，讓我們開始逐步創建我們的節日賀卡製作工具。

步驟 1. 實作制卡器介面

讓我們先專注於為我們的卡片製作器創建一個簡單的佈局。我們將設定一個包含欄位的表單，供使用者新增姓名、問候語和上傳圖像。我們還將添加一個顯示卡片的預覽區域。

基本版面如下：

？ app.vue

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

登入後複製

為什麼我們需要這個設定？

createSSRApp 和 renderToString ：透過虛擬安裝元件及其 props 並渲染其最終輸出，將 Vue 元件渲染為 HTML 字串。
useLocalStorage ：在本地儲存表單數據，這樣使用者重新載入時就不會遺失進度。
watchDebounced ：透過延遲使用者輸入的處理直到鍵入停止後的一定持續時間來幫助我們防止效能問題。
satori：將 HTML 轉換為 SVG 以用於我們的圖形。
satori-html ：將 HTML 字串解析為 satori 所理解的格式。
字型引用使用 useLocalStorage 來儲存使用者的輸入。如果您刷新頁面，我們不會丟失表單輸入，並且可以從離開的地方繼續。
svg 和 fonts 變數將儲存產生的卡片設計和載入的字體資料。

步驟 3. 建立卡片模板

接下來，讓我們建立先前匯入的卡片模板元件。這就是奇蹟發生的地方。

我們將使用表單中的資料來個人化卡片。在 Components/ChristmasCard.vue 中，我們將設計卡片的視覺模板。可以將其想像為設計一塊畫布，使用者可以在其中個性化他們的問候語。

？ 組件/ChristmasCard.vue

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

登入後複製

分解：

我們使用 Nuxt 3 中自動匯入的 onMounted 鉤子來載入和儲存產生圖形所需的字型。
您可以使用任何 .ttf 字型檔。要獲取我使用的相同字體“Instrument Sans”字體，請訪問 Google Fonts，點擊“獲取字體”，然後下載字體檔案。解壓縮 ZIP 文件，然後將 .ttf 字型（例如 InstrumentSans-Regular.ttf）複製到 Nuxt 專案的 public/fonts 資料夾中。在程式碼中將其引用為 /fonts/InstrumentSans-Regular.ttf。
在onMounted內部，我們呼叫refreshGraphics來在字型載入後產生初始SVG圖形。
我們使用 watchDebounced 來追蹤表單的變化，並在上次更新後 500 毫秒更新圖形。 注意：這是一個性能技巧。
loadFonts 函數使用 Promise.all 一次載入所需的字體，而不是順序載入。 另一個需要注意的性能技巧。

步驟 5. 從 Vue 元件產生 SVG

這是我們將一切連結在一起的地方。我們將把 ChristmasCard 元件轉換為 SVG。

？ app.vue

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

登入後複製

讓我解釋一下：

我們首先使用 renderToHTML 實用函數將先前匯入的 ChristmasCard.vue 元件轉換為 HTML 字串
然後我們使用先前從 satori-html 匯入的 html 函數將 HTML 字串轉換為 satori 套件可接受的標記格式
最後，我們呼叫 satori，傳入標記、寬度和高度配置以及我們先前在 onMounted 掛鉤中載入的字體
產生的 svg 字串儲存在 svg.value 引用中，我們在 app.vue 模板部分中使用它來在視口上顯示 svg。請參閱模板部分

步驟 6. 實用函數

讓我們透過為程式碼和模板功能添加一些基本的實用函數來結束我們一直在做的所有事情。

新增圖片上傳支援

我們正在新增處理影像上傳的功能。這將確保使用者可以選擇圖像，檢查它是否在大小限制 (100KB) 內，然後顯示它。

將其貼到刷新圖形程式碼下方：

？ app.vue

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

登入後複製

為什麼要檢查檔案大小？ 我們限製檔案大小以確保流暢的效能。任何更大的值都會減慢速度，因此 100KB 是一個安全上限。

將 Vue 元件轉換為 HTML 字串

接下來，我們將 Vue 元件渲染為 HTML 字串。這使我們能夠使用 Vue 進行伺服器端渲染、電子郵件範本或靜態網站產生。在本例中，它用於產生賀卡模板。讓我們將其添加到我們的程式碼中。

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

登入後複製

解釋：

createSSRApp ：此函數用於建立伺服器端渲染（SSR）Vue 應用程式實例，該實例可以渲染為 HTML 字串。
renderToString ：這會將 Vue 元件（GreetingCard）渲染為 HTML 字串，並傳遞元件所需的任何道具。

下載 JPEG 格式的卡

最後，讓我們加入程式碼，使我們能夠以 JPEG 格式下載卡片。

？ app.vue

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

登入後複製

為什麼會這樣？ 透過使用 HTML Canvas API，我們可以將 SVG 繪製到畫布上並將其轉換為 JPEG 以便於下載。這是一種從向量圖形生成圖像檔案的快速有效的方法。

步驟 7. 造型

為了確保 SVG 元素在容器中正確顯示，我們需要套用一些 CSS 樣式。由於產生的 SVG 的大小固定為 1080px x 1080px，但父容器較小，因此我們需要縮放 SVG 以適合容器內部而不變形。

？ app.vue

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

登入後複製

此 CSS 規則可確保調整 .banner-here div 內的 SVG 元素大小以填滿可用空間，同時保持其縱橫比。

Build a Greeting Card Maker w/ Vue Satori

現在，您的項目應該類似於此螢幕截圖。讓我們運行一下，看看真正的魔力！

運行我們的程式碼

要查看我們的應用程式的運作情況，請執行以下命令並在瀏覽器上開啟 http://localhost:3000。

作為參考，這裡是本教學的 Github 儲存庫。

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

登入後複製

Build a Greeting Card Maker w/ Vue Satori