靜態圖片 - RemotionLab

什麼是 Still？

除了渲染影片，Remotion 也可以渲染單幀為靜態圖片。這適合：

影片縮圖
社群媒體圖片
OG Image（Open Graph 預覽圖）
動態海報

CLI 渲染

# 渲染第 0 幀為 PNG
npx remotion still MyComposition out/image.png
 
# 指定幀數
npx remotion still MyComposition out/image.png --frame=45
 
# 渲染為 JPEG
npx remotion still MyComposition out/image.jpeg --image-format=jpeg
 
# 指定 JPEG 品質（0-100）
npx remotion still MyComposition out/image.jpeg --image-format=jpeg --jpeg-quality=90

專用 Composition

你可以定義專門用於圖片的 Composition——只需要 1 幀：

<Composition
  id="Thumbnail"
  component={Thumbnail}
  durationInFrames={1}
  fps={30}
  width={1200}
  height={630}
  defaultProps={{
    title: "我的文章標題",
    author: "作者名稱",
  }}
/>

1200×630 是常見的 OG Image 尺寸。

Node.js API

import { renderStill } from "@remotion/renderer";
 
await renderStill({
  composition,
  serveUrl: bundled,
  output: "out/thumbnail.png",
  frame: 0, // 渲染第 0 幀
  imageFormat: "png",
});

批量產出圖片

結合參數化，批量產出不同內容的圖片：

const articles = [
  { title: "React 入門", author: "Alice" },
  { title: "TypeScript 進階", author: "Bob" },
  { title: "Remotion 教學", author: "Charlie" },
];
 
for (const article of articles) {
  const composition = await selectComposition({
    serveUrl: bundled,
    id: "Thumbnail",
    inputProps: article,
  });
 
  await renderStill({
    composition,
    serveUrl: bundled,
    output: `out/${article.title}.png`,
    inputProps: article,
  });
}

透明背景

PNG 支援透明背景。只要不設定 backgroundColor：

export const TransparentImage: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 不設定背景色，背景就是透明的 */}
      <h1 style={{ color: "white", fontSize: 72 }}>透明背景</h1>
    </AbsoluteFill>
  );
};

小結

npx remotion still 渲染單幀為圖片
支援 PNG（含透明）和 JPEG 格式
適合縮圖、OG Image、社群媒體圖片
搭配參數化可以批量產出不同內容的圖片