Skip to main content

renderStillOnWeb()v4.0.397

warning

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

属于 @remotion/web-renderer 包的一部分.

🌐 Part of the @remotion/web-renderer package.

在浏览器中将单帧渲染为图片。
如果你想渲染视频，请使用 renderMediaOnWeb()。

🌐 Renders a single frame to an image in the browser.
If you want to render a video instead, use renderMediaOnWeb().

Example usage
import {renderStillOnWeb} from '@remotion/web-renderer';
import {Video} from '@remotion/media';

const Component: React.FC = () => {
  return <Video src="https://remotion.media/video.mp4" />;
};

const {blob} = await renderStillOnWeb({
  composition: {
    component: Component,
    durationInFrames: 100,
    fps: 30,
    width: 1920,
    height: 1080,
    id: 'my-composition',
  },
  frame: 0,
  imageFormat: 'png',
});

参数​

🌐 Arguments

一个具有以下属性的对象：

🌐 An object with the following properties:

composition​

一个描述组成的对象。该对象应具有以下属性：

🌐 An object describing a composition. The object should have the following properties:

  • id：作品的唯一标识符。
  • component：一个渲染内容的 React 组件。
  • durationInFrames：合成的持续时间（以帧为单位）。
  • fps：合成的帧率。
  • width：输出的像素宽度。
  • height：输出的像素高度。
  • defaultProps?：可传递给组件的可选默认属性。
  • calculateMetadata?：可选功能，用于计算元数据。如果提供此功能，width、height、fps 和 durationInFrames 可以省略，并将动态计算。

frame​

number

应渲染构图的哪一帧。帧的索引从零开始。

🌐 Which frame of the composition should be rendered. Frames are zero-indexed.

imageFormat​

字符串 RenderStillOnWebImageFormat

🌐 string RenderStillOnWebImageFormat

输出图片的格式。

🌐 The format of the output image.

inputProps?​

object

传递给组件的输入属性。
你可以使用 calculateMetadata() 来转换输入属性。

note

你不能在客户端渲染中使用 getInputProps() 来读取输入属性。

scale?​

number

Scales the output dimensions by a factor. For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of 1.5. See Scaling for more details.

delayRenderTimeoutInMilliseconds?​

number

一个数字，用于描述渲染可能需要多长时间来解决所有 delayRender() 调用 在它超时之前。 默认值为 30000。

🌐 A number describing how long the render may take to resolve all delayRender() calls before it times out.
Default is 30000.

logLevel?​

字符串 LogLevel

确定在渲染过程中记录多少信息。 默认值是 "info"。

🌐 Determines how much information is logged during rendering.
Default is "info".

signal?​

中止信号

🌐 AbortSignal

一个AbortSignal，允许渲染被取消。

🌐 An AbortSignal that allows the render to be cancelled.

import {renderStillOnWeb} from '@remotion/web-renderer';

const controller = new AbortController();

// Cancel after 5 seconds
setTimeout(() => controller.abort(), 5000);

const {blob} = await renderStillOnWeb({
  composition,
  frame: 0,
  imageFormat: 'png',
  signal: controller.signal,
});

有关更多细节和错误处理模式，请参见 取消渲染。

🌐 See Cancelling renders for more details and error handling patterns.

mediaCacheSizeInBytes?​

数字 | null

🌐 number | null

Specify the maximum size of the cache that <Video> and <Audio> from @remotion/media may use combined, in bytes.
The default is half of the available system memory when the render starts.

onArtifact?​

function

[处理由 <Artifact> 组件发出的工件](/docs/artifacts#using-rendermedia-renderstill-or-renderframes)。

schema?​

Zod v4 架构 $ZodObject

用于验证输入属性的 Zod v4 模式。请参阅 Schemas 以获取更多信息。

🌐 A Zod v4 schema to validate the input props. See Schemas for more information.

licenseKey?​

string

用于此渲染的许可证密钥。 有关更多信息，请参见客户端渲染中的遥测。

🌐 A license key to use for this render.
See Telemetry in client-side rendering for more information.

isProduction?v4.0.409​

默认 true

🌐 default true

Pass false if this a development render to not count it as a billable render on remotion.pro. Only can be used in conjuction with licenseKey.

返回值​

🌐 Return value

返回一个解析为具有以下属性的对象的 Promise：

🌐 Returns a promise resolving to an object with the following properties:

blob​

包含渲染图片的 Blob。

🌐 A Blob containing the rendered image.

Display the image
import {renderStillOnWeb} from '@remotion/web-renderer';

const {blob} = await renderStillOnWeb({
  composition,
  frame: 0,
  imageFormat: 'png',
});

// Display the image
const url = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);

另请参阅​

🌐 See also

Last updated on