輸出縮放

自 v2.6.7 起可用

輸出縮放功能可讓你以不同解析度渲染相同長寬比的影片。

範例情境：你的影片畫布為 Full HD（1920x1080），但你希望渲染成 4K（3840x2160，即 2 倍大小）。Remotion 支援這種高解析度渲染，方式是：

• 在伺服器端渲染時設定無頭瀏覽器的 deviceScaleFactor
• 在客戶端渲染時對畫布上的元素進行放大

如何使用縮放

使用 CLI

在渲染影片或靜態圖片時，透過 --scale 旗標傳入縮放倍數：

npx remotion render MyComp --scale=2

使用 Node.js API

在以下函式中傳入 scale 選項：

• renderStill()
• renderFrames()
• renderStillOnLambda()
• renderMediaOnLambda()
• renderMediaOnVercel()
• renderStillOnVercel()
• renderMediaOnCloudRun()
• renderStillOnCloudRun()

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "h264",
  outputLocation: "out/video.mp4",
  scale: 2, // 渲染 4K 輸出（若原始為 1080p）
});

使用客戶端渲染 API

在 renderMediaOnWeb() 和 renderStillOnWeb() 中傳入 scale 選項：

import { renderMediaOnWeb } from "@remotion/renderer";
 
await renderMediaOnWeb({
  compositionId: "MyComp",
  scale: 2,
});

使用設定檔

在 remotion.config.ts 中使用 setScale() 函式：

import { Config } from "@remotion/cli/config";
 
Config.setScale(2);

允許的值

• 最高縮放倍數：16（即尺寸放大 16 倍，或像素數增加 256 倍）
• 允許小於 1 的正數：例如 0.5 會將每個尺寸縮小為一半
• 自 4.0.328 起：
  • 不再要求縮放後的像素數為整數，系統會自動四捨五入
  • 使用 H.264 編碼時，不再要求縮放結果為偶數

常用縮放倍數範例

可縮放的元素

以下元素可以放大並在更高解析度下呈現更好品質：

• 文字元素：文字會以更高解析度渲染，結果更清晰
• SVG 元素：向量圖形在任何解析度下都清晰
• 圖片（前提是原始圖片解析度足夠高）

以下元素無法透過縮放提升解析度：

• 影片：影片的解析度固定，縮放只是放大現有像素
• Canvas 和 WebGL 元素：這些元素的渲染解析度不會隨 scale 提升

實際使用場景

多解析度輸出

如果你需要同一個作品輸出多種解析度（例如用於不同平台），可以多次渲染並傳入不同的 scale 值：

# 渲染 720p
npx remotion render MyComp --scale=0.667 --output out/720p.mp4
 
# 渲染 1080p（原始尺寸）
npx remotion render MyComp --scale=1 --output out/1080p.mp4
 
# 渲染 4K
npx remotion render MyComp --scale=2 --output out/4k.mp4

解決高密度螢幕上文字模糊的問題

在高密度螢幕（例如 MacBook Retina 顯示器）上，如果以 1920x1080 渲染文字，嵌入網頁後文字會顯得模糊。這是因為裝置的像素密度是 2x，但影片每個像素對應裝置上的 2 個像素。

解決方案是使用輸出縮放：

# 渲染 2 倍大小，以在 Retina 螢幕上保持清晰度
npx remotion render MyComp --scale=2

詳情請參閱品質指南。

參見

• 品質指南
• renderMedia() API 文件
• Config.setScale()