搜索

首页 >web前端 >js教程 >使用 Vue Satori 构建贺卡制作工具

使用 Vue Satori 构建贺卡制作工具

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-12-20 20:39:20728浏览

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

为什么我们需要这个设置？

  1. createSSRApp 和 renderToString ：通过虚拟安装组件及其 props 并渲染其最终输出，将 Vue 组件渲染为 HTML 字符串。
  2. useLocalStorage ：在本地保存表单数据，这样用户重新加载时就不会丢失进度。
  3. watchDebounced ：通过延迟用户输入的处理直到键入停止后的一定持续时间来帮助我们防止性能问题。
  4. satori：将 HTML 转换为 SVG 以用于我们的图形。
  5. satori-html ：将 HTML 字符串解析为 satori 理解的格式。
  6. 字体引用使用 useLocalStorage 来保存用户的输入。如果您刷新页面，我们不会丢失表单输入，并且可以从离开的地方继续。
  7. 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

您应该会看到类似于上面 GIF 中的界面的内容。您可以编辑详细信息、添加图像并下载图像。恭喜！您现在拥有自己的个人节日贺卡制作工具。

总结

您刚刚构建了一个个性化贺卡制作工具！ ？但不要停在这里。尝试不同的设计，添加更多自定义选项，甚至为其他场合创建卡片。

扩展项目的一些想法：

  • 添加更多背景主题
  • 包括文本颜色/字体选择
  • 创建生日、周年纪念日模板

想要在客户端做更多事情吗？阅读本文，了解如何在浏览器中渲染 3D 对象。

最初发布于 https://www.vuemastery.com 于 2024 年 12 月 19 日发布。

以上是使用 Vue Satori 构建贺卡制作工具的详细内容。更多信息请关注PHP中文网其他相关文章！

css html edge Static String if for while select format include auto break continue using public Interface finally copy function this promise display viewport background canvas input github web app http https everything Foundation Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：How Can I Add Properties to JavaScript Objects Dynamically?下一篇：How to Split a JavaScript String Using Multiple Separators?

相关文章

查看更多