Vue Satori를 사용하여 인사말 카드 작성기 구축-JS 튜토리얼-php.cn

Build a Greeting Card Maker w/ Vue Satori

작가: Dubem Izuorah

귀하의 코딩 기술을 활용하는 축제 프로젝트를 찾고 있는 창의적인 개발자를 위해 맞춤 설정하고 사진을 추가하고 즉시 다운로드할 수 있는 디지털 명절 인사말 카드를 만들어 보세요. 우리는 이를 실현하기 위해 몇 가지 최첨단 웹 기술을 사용할 것이며, 그 과정에서 그래픽 생성, 여러 가지 멋진 패키지 및 몇 가지 깔끔한 Vue 3 요령에 대해 배우게 될 것입니다.

우리가 무엇을 만들 것인가

Build a Greeting Card Maker w/ Vue Satori

명절 연하장 작성기 인터페이스 스크린샷

이 튜토리얼이 끝나면 다음을 얻게 됩니다.

맞춤형 명절 카드를 만들기 위한 모든 기능을 갖춘 웹 앱
Vue 3, Nuxt 및 일부 강력한 렌더링 라이브러리를 직접 사용해 본 경험
브라우저에서 그래픽을 동적으로 생성하는 방법에 대한 이해

프로젝트 초기화

Vue 애플리케이션을 위한 강력한 배터리 포함 설정을 제공하는 Nuxt 3를 프레임워크로 사용하겠습니다. 터미널을 열고 아래 명령을 실행하여 프로젝트를 생성해 보겠습니다.

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 구성 요소 및 소품을 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: 구성 요소와 소품을 가상으로 마운트하고 최종 출력을 렌더링하여 Vue 구성 요소를 HTML 문자열로 렌더링합니다.
useLocalStorage: 양식 데이터를 로컬에 저장하므로 사용자가 다시 로드해도 진행 상황이 손실되지 않습니다.
watchDebounced : 입력이 중지된 후 특정 기간이 될 때까지 사용자 입력 처리를 지연하여 성능 문제를 방지하는 데 도움이 됩니다.
satori : 그래픽을 위해 HTML을 SVG로 변환합니다.
satori-html : HTML 문자열을 satori가 이해할 수 있는 형식으로 구문 분석합니다.
글꼴 참조는 useLocalStorage를 사용하여 사용자의 입력을 유지합니다. 페이지를 새로 고치면 양식 입력이 손실되지 않고 이전 단계부터 계속할 수 있습니다.
svg 및 글꼴 변수는 생성된 카드 디자인과 로드된 글꼴 데이터를 저장합니다.

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를 사용하여 양식의 변경 사항을 추적하고 마지막 업데이트 후 500ms 후에 그래픽을 업데이트합니다. 참고: 이는 성능 트릭입니다.
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) 이내인지 확인하여 표시할 수 있습니다.

refreshGraphics 코드 아래에 다음을 붙여넣으세요.

? 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: 이 함수는 HTML 문자열로 렌더링할 수 있는 서버측 렌더링(SSR) Vue 애플리케이션 인스턴스를 생성하는 데 사용됩니다.
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