서버에서 SVG DNA 이미지 만들기

[sumi-0011]

🤔 해결하려는 문제가 무엇인가요?

DNA 이미지 다운로드를 위해, 먼저 이미지를 만들어야해요

🎉 변경 사항

• 로컬 image와 이름을 조합해 만들고 싶은 이미지의 DNA dom element를 만들었어요
• �satori option에 font를 설정해주어햐 해서 NotoSans 폰트 받아왔어요.
• satori 라이브러리를 이용해서 서버에서 이미지를 만들고, 클라이언트로 만든 svg string을 보내주었어요
• 클라이언트에서는 서버에서 받아온 svg string을 dom에 강제 삽입해서 보여줄 수 있도록 하였습니다.

🙏 여기는 꼭 봐주세요!

• NotoSans 폰트는 저희가 사용하는 Pretendard는 아니지만, 크게 중요한 사항은 아닌것 같아 추후 적용하려고 생각중입니다.
• 이후 svg를 png로 바꾸는 Resvg라이브러리 등을 이용해 svg를 이미지로 만들고, 다운로드 할 수 있는 기능을 추가하려고 합니다.
• DNA Banner를 띄우는 부분과 image 경로가 겹쳐, 재활용 하면 좋을 것 같아요. DNA Banner의 DNA 이미지 상수를 상수 폴더에 옮기면 어떨까요?
• build에서 에러나는 이유는 ssr을 사용해서 입니다! 무시해주세요

사용 방법

export async function getServerSideProps() {
  const notoSansScFont = await fetchFont();
  if (!notoSansScFont) return { props: {} };

  const imageOptions: SatoriOptions = {
    width: 329,
    height: 389,
    fonts: [
      {
        name: 'Noto Sans KR',
        data: notoSansScFont,
        weight: 700,
        style: 'normal',
      },
    ],
  };
 
  const ogImage = await createOGImage(<DNAImageView group={'A'} name={'변수미'} />, imageOptions);

  return {
    props: {
      ogImage,
    },
  };
}

🌄 스크린샷

📚 참고

• https://github.com/vercel/satori
• https://www.simeongriggs.dev/serve-dynamic-og-images-from-remix-with-satori
• https://og-playground.vercel.app/

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	26a9480
Status:	🚫  Build failed.

View logs