静止图片

v2.3

Remotion 是一个很棒的解决方案，也适用于渲染视频或动态静态图片的缩略图。查看我们的静态模板以快速入门。

🌐 Remotion is a great solution for rendering thumbnails of videos or dynamic still images too. See our Still template for an easy way to get started.

如果你已经有一个 Remotion 项目，请继续阅读关于如何渲染静帧的内容。

🌐 If you already have a Remotion project, read on how you can render stills.

定义蒸馏器

🌐 Defining a still

使用<Still />组件代替<Composition />组件来定义一个静态画面。时间线将消失，并且你无需定义持续时间或帧率值。

🌐 Use the <Still /> component instead of the <Composition /> one to define a still. The timeline will disappear, and you will not have to define a duration or FPS value.

在浏览器中预览静态图片

🌐 Previewing a still in the browser

你可以在常规的 React 应用（Next.js、Vite、Create React App 等）中使用来自 @remotion/player 的 <Thumbnail> 组件来预览静态图片。如果你想在渲染前在 web 应用中显示你的静态图片，这非常有用。

🌐 You can use the <Thumbnail> component from @remotion/player to preview a still image in a regular React app (Next.js, Vite, Create React App, etc.). This is useful if you want to display your still in a web application before rendering it.

通过命令行渲染

🌐 Rendering via CLI

你可以使用 npx remotion still 命令来渲染静止图片。示例命令：

🌐 You can use the npx remotion still command to render a still image. Example command:

npx remotion still --props='{"custom": "data"}' my-comp out.png

你可以使用 --image-format 标志来确定输出格式。默认格式是 png，其他选项包括 jpeg、webp 和 pdf。

🌐 You can use the --image-format flag to determine the output format. The default format is png, with jpeg, webp and pdf being the other options.

默认情况下，将呈现带有作品编号的帧，你可以使用 --frame 标志来控制它。

🌐 By default the frame with number of a composition is being rendered, you can control it using the --frame flag.

使用 Node.JS 渲染

🌐 Rendering using Node.JS

你可以使用 renderStill() Node.JS API 以编程方式渲染静态帧。

🌐 You can use the renderStill() Node.JS API to render a still frame programmatically.

在浏览器中渲染

🌐 Rendering in the browser

warning

非常实验性的功能——随时可能出现漏洞和重大更改。 在 GitHub 上跟踪进度 并在 Discord 的 #web-renderer 通道中讨论。

你可以使用 renderStillOnWeb() 浏览器 API 来以编程方式渲染静态帧。

🌐 You can use the renderStillOnWeb() browser API to render a still frame programmatically.

使用 Remotion Lambda 渲染

🌐 Rendering using Remotion Lambda

你可以使用 Remotion Lambda 来渲染静帧：

🌐 You can use Remotion Lambda to render stills:

• 通过 renderStillOnLambda() API。
• 通过 npx remotion lambda still CLI 命令。

使用 Cloud Run 进行渲染

🌐 Rendering using Cloud Run

你可以使用 Cloud Run 来渲染静态图片：

🌐 You can use Cloud Run to render stills:

• 通过 renderStillOnCloudRun() API。
• 通过 npx remotion cloudrun still CLI 命令。