拓冰网站定制 
Remotion Still 静态图片模板实战用 React 动态生成可部署的云上图片服务【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本指南以仓库中的 template-still 模板 为核心讲解如何用 React 组件设计静态图片Open Graph 卡片、社交预览图等并通过内置的 Express 服务器按 URL 参数实时渲染、返回 PNG/JPEG 图片。读完本文你将掌握模板的本地设计/渲染命令、服务器动态出图机制、三种缓存模式filesystem / none / s3-bucket以及 Heroku、DigitalOcean 云端部署要点。template-still 模板渲染出的预览卡片效果示例模板定位一张图 一个服务Remotion 的核心能力是用 React 写视频而 template-still 则把同一套思路收敛到静态图片你仍用 React 组件描述画面但产出的是一张带动态数据的图片。其官方描述是A template for designing still images with dynamic data with built-in server for deploying to the cloud.也就是说这个模板自带两套使用场景纯设计在 Remotion Studio 中即时预览并调参最终render出静态 PNG服务化输出启动内置服务器后任何人访问http://localhost:8000/PreviewCard.png?title...这种 URL即可按查询参数动态生成图片——非常适合做动态 OG 图 / 卡片渲染 API再叠加缓存与限流后直接部署到云端。模板的源码体积很小目录结构如下位于 packages/template-stillsrc/ ├── index.ts # registerRoot 注册 Remotion 入口 ├── Root.tsx # 注册 Still composition 及其默认 props ├── PreviewCard.tsx # 示例图片组件主卡片设计 ├── Swirl.tsx # Canvas 绘制的彩色漩涡装饰层 ├── fonts.css # Inter 字体引入 └── server/ # 图片服务端 ├── index.ts # Express 主程序 路由 渲染调用 ├── handler.ts # 异常包装与并发控制 ├── config.ts # 缓存模式 / S3 配置 ├── cache.ts # 三级缓存读写抽象 ├── s3.ts # S3 客户端封装 ├── image-types.ts # 图片格式/ MIME 映射 ├── make-hash.ts # 基于 props 的缓存键哈希 ├── help-text.ts # 启动提示文案 └── send-file.ts # 流式回写响应 ├── Dockerfile # 可部署的容器化服务器镜像 ├── remotion.config.ts # CLI/打包配置 └── package.json下文先讲本地设计与渲染再深入服务端实现。第一步本地设计模式Remotion Studio在模板目录下安装依赖后进入设计模式即可实时编辑 React 组件并预览画面npm run dev该命令实际执行的是 package.json 中定义的remotion studio。Remotion Studio 会打开可视化界面左侧列出注册的 composition右侧实时渲染当前画面。本模板注册的唯一 composition 在 src/Root.tsx 中定义Still idPreviewCard component{PreviewCard} width{1200} height{627} schema{myCompSchema} defaultProps{{ title: Welcome to Remotion, description: Edit Video.tsx to change template, color: #0B84F3, }} /Still是 Remotion 面向单帧静态图的内置组件。1200×627 正是主流社交平台 Open Graph 图片推荐比例。组件的入参props通过 Zod schema 声明这让 Studio 能自动生成可视化表单用于调参。页面组件本体在 src/PreviewCard.tsxexport const myCompSchema z.object({ title: z.string(), description: z.string(), color: zColor(), });其中color使用remotion/zod-types提供的zColor()类型Studio 中会渲染为取色器并且值除了十六进制色值外还兼容多种 CSS 颜色表示。组件内部用普通 React 内联样式排版标题、描述、品牌标语并在底层叠加一层 Swirl.tsx 用原生 Canvas API 绘制随参数变化的波浪线条。值得一提的是 PreviewCard.tsx 中为文字容器设置了whiteSpace: pre-wrap注释说明这一行的用意是允许通过 URL 参数中的%0A注入换行方便调用方控制多行文案。第二步渲染成品图片在设计界面确认效果后渲染单张静态图npx remotion render它会渲染默认 compositionPreviewCard输出图片模板同时也提供了等价脚本npm run render底层命令为remotion still PreviewCard out/still.png。模板在 remotion.config.ts 中预设了Config.setRspack(true)启用 Rspack 打包并设置视频帧格式为 JPEG、输出可覆盖。如果只关心单张出图使用到这一步就已足够。保持依赖版本与 Remotion 主线同步npx remotion upgrade第三步把图片变成服务——URL 即渲染请求模板真正的亮点在内置服务器把图片渲染包装成一次 HTTP GET 请求URL 的路径与查询参数共同决定图片内容。启动服务器npm run server该脚本执行bun src/server/index.ts需要本机有 bun若用 Node 运行可先npm run make执行tsc -d编译再用npm start。服务监听process.env.PORT || 8000启动成功后会打印类似提示Go to http://localhost:8000/PreviewCard.png?titleHelloWorld in your browser to render a still image.访问下列地址即可在浏览器直接得到渲染好的图片http://localhost:8000/PreviewCard.png?titleHelloWorldURL 的三段语义在 src/server/index.ts 中体现URL 片段作用/:compositionname指定要渲染的 composition 的 ID路由正则限定为/:name.:format(png|jpe?g).:format以.png或.jpeg/.jpg结尾决定输出图片格式?query查询参数作为 inputProps 传入 React 组件例如?titleHelloWorlddescriptionfoobar服务端会把整份 query 对象作为inputProps传给组件等价于传入{title: Hello World, description: foobar}。因此任何你想动态化渲染的字段都应先加到组件的 Zod schema 中再作为查询参数拼接。由于示例组件支持%0A换行也可以这样构造多行卡片文案http://localhost:8000/PreviewCard.png?titleHello%0AWorldcolor%230B84F3服务端渲染链路一次请求在服务端内部经历了完整查询缓存 → 选片 → 渲染 → 回写缓存链路核心代码都集中在 src/server/index.ts服务启动时用remotion/bundler的bundle()把src/index.ts打成 web 入口包index.ts路由命中后先用getImageHash(JSON.stringify({compName, imageFormat, inputProps}))计算请求的 MD5 哈希作为缓存键make-hash.ts——这意味着相同 composition 相同参数会命中同一缓存若isInCache(hash)命中则直接流式返回缓存文件send-file.ts 把 Readable 管道写入 Response未命中时调用selectComposition({id, inputProps, serveUrl})选出对应 composition再renderStill({composition, output, inputProps, imageFormat})渲染到临时文件图片写回响应后saveToCache(hash, buffer)存入缓存并删除临时文件。出于稳定性考虑服务端还有两层防护见 handler.ts 与 index.ts限流通过app.set(trust proxy, 1)还原真实 IP并施加express-rate-limit每用户每分钟最多 20 次请求并发控制用p-limit把图片渲染串行化pLimit(1)避免单台机器上多个 Chrome 渲染进程相互挤压内存。任何异常都会被包装成application/json的{success: false, error}响应返回。第四步三种缓存模式服务端的缓存策略完全可配置开关集中在 src/server/config.tsexport const CACHE_MODE: CacheMode filesystem; export const AWS_BUCKET_NAME remotion-image-cache; export const AWS_REGION eu-central-1; type CacheMode filesystem | s3-bucket | none;CACHE_MODE行为适用场景filesystem默认渲染结果写入操作系统临时目录os.tmpdir()下remotion-前缀的mkdtemp目录文件名为 MD5 哈希宿主机磁盘非临时/有充足存储的平台命中后几乎零延迟none完全不做缓存每个请求实时渲染图片内容变化极频繁、不关心重复渲染开销的场景s3-bucket图片缓存到 AWS S3读写均以 MD5 哈希为对象 Key临时文件系统如 Serverless/容器重启丢盘环境下的持久缓存三者共用同一套缓存抽象isInCache/getFromCache/saveToCache定义在 cache.ts内部根据CACHE_MODE分流到本地文件读写或 S3 读写对上层路由完全透明。启用 S3 缓存切换到s3-bucket后需要两处配置在 src/server/config.ts 中把AWS_BUCKET_NAME与AWS_REGION改成你自己的桶名和区域提供具备 S3 读写权限的凭证。代码在 index.ts 中调用dotenv.config()本地开发时把仓库内的 .env.example 复制为.env并填写AWS_ACCESS_KEY_IDEnter AWS Access Key ID AWS_SECRET_ACCESS_KEYEnter secret Access Key底层 S3 客户端封装在 src/server/s3.ts使用 AWS SDK v3existsOnS3HeadObjectCommand探测对象是否存在不存在抛错则视为未命中getOnS3GetObjectCommand读取对象并把 Body 作为可读流返回writeToS3PutObjectCommand把渲染好的 Buffer 写入桶。从代码可推断整个 S3 缓存只以 MD5 哈希作为对象 Key、且未配置过期策略因此如何控制桶内对象数量、何时淘汰旧图需要你在业务侧自行规划例如配合 S3 生命周期规则。按模板 README 的指引创建 S3 桶的完整步骤是打开 S3 控制台新建 bucket可保留默认的 Deny all public access拒绝公有访问勾选——图片仅由服务器私密读写不需要公开把桶名与区域填入src/server/config.ts在 IAM 控制台新建用户并启用 Programmatic Access编程访问权限选择 Attach existing policies directly 并附加AmazonS3FullAccess在创建完成页拿到AWS_ACCESS_KEY_ID与AWS_SECRET_ACCESS_KEY本地写入.env云端部署时则写入平台的环境变量面板。第五步云端部署由于渲染依赖无头 Chrome云端部署的关键是让运行环境具备 Chromium 依赖。模板针对两类平台给出了官方路径另外提供了一个通用 Dockerfile。部署到 Heroku在 Heroku 应用的 Settings → Buildpacks 中额外添加 Google Chrome Buildpackhttps://github.com/heroku/heroku-buildpack-google-chrome这样应用启动时便会预装 Chrome 运行时供 Remotion 渲染使用随后再启动服务器进程即可。部署到 DigitalOcean模板给出了 Dockerfilepackages/template-still/Dockerfile最省事的方式是走 DigitalOcean App Platform在https://cloud.digitalocean.com/apps/new连接你的 Git 仓库直接部署。该 Dockerfile 的要点值得注意基础镜像为node:22-bookworm-slim随后apt安装libnss3、libgbm-dev、libasound2、libxkbcommon-dev等一整套 Chromium 运行所需的系统库将代码复制进容器执行npm i并以非特权用户启动EXPOSE 8000并默认执行npm run server。如果你的部署平台支持任意 Docker 镜像如各类容器 PaaS/K8s同样可以复用这个 Dockerfile 思路模板注释也说明若你并不需要服务器渲染可以安全地删除该文件。无论部署到何处都别忘了把PORT若平台指定端口以及 S3 模式下的两个 AWS 环境变量配置进平台面板。需要 Serverless 化如果希望把静态图渲染放进函数计算Lambda模板 README 明确指向了Remotion Lambda方案——它把 Remotion 渲染打包进 AWS Lambda 按需调度适用于高并发、按调用计费的场景与本文这套常驻 Express 服务器的模型不同。读者可参考仓库中 Remotion 主文档与 lambda 相关包 了解用法再根据流量模型二选一。进一步定制与维护想要改成自己的业务卡片通常只需改动三个文件src/PreviewCard.tsx重写布局、样式与 Zod schema新增字段后 URL 参数即自动生效src/Root.tsx新增/修改Stillcomposition 的 id、尺寸与defaultProps如需换字体在 fonts.css 中引入Swirl.tsx 的 Canvas 装饰也可替换为自己的图形。日常维护命令集中在 package.jsonnpm run dev进入 Studio、npm run render出图、npm run buildremotion bundle产出静态包、npm run server启动图片服务、npm run lint执行 ESLint 与 TS 类型检查npx remotion upgrade用于跟进 Remotion 版本。作为整体项目的入口还可以结合仓库根目录的 README.md 与 Remotion 文档中关于「The Fundamentals」的内容了解 composition、renderStill、Studio 等底层概念想查看renderStill与selectComposition更底层的参数语义可继续阅读 renderer 包 中的相关实现。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Remotion Still 静态图片模板实战：用 React 动态生成可部署的云上图片服务
Remotion Still 静态图片模板实战用 React 动态生成可部署的云上图片服务【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本指南以仓库中的 template-still 模板 为核心讲解如何用 React 组件设计静态图片Open Graph 卡片、社交预览图等并通过内置的 Express 服务器按 URL 参数实时渲染、返回 PNG/JPEG 图片。读完本文你将掌握模板的本地设计/渲染命令、服务器动态出图机制、三种缓存模式filesystem / none / s3-bucket以及 Heroku、DigitalOcean 云端部署要点。template-still 模板渲染出的预览卡片效果示例模板定位一张图 一个服务Remotion 的核心能力是用 React 写视频而 template-still 则把同一套思路收敛到静态图片你仍用 React 组件描述画面但产出的是一张带动态数据的图片。其官方描述是A template for designing still images with dynamic data with built-in server for deploying to the cloud.也就是说这个模板自带两套使用场景纯设计在 Remotion Studio 中即时预览并调参最终render出静态 PNG服务化输出启动内置服务器后任何人访问http://localhost:8000/PreviewCard.png?title...这种 URL即可按查询参数动态生成图片——非常适合做动态 OG 图 / 卡片渲染 API再叠加缓存与限流后直接部署到云端。模板的源码体积很小目录结构如下位于 packages/template-stillsrc/ ├── index.ts # registerRoot 注册 Remotion 入口 ├── Root.tsx # 注册 Still composition 及其默认 props ├── PreviewCard.tsx # 示例图片组件主卡片设计 ├── Swirl.tsx # Canvas 绘制的彩色漩涡装饰层 ├── fonts.css # Inter 字体引入 └── server/ # 图片服务端 ├── index.ts # Express 主程序 路由 渲染调用 ├── handler.ts # 异常包装与并发控制 ├── config.ts # 缓存模式 / S3 配置 ├── cache.ts # 三级缓存读写抽象 ├── s3.ts # S3 客户端封装 ├── image-types.ts # 图片格式/ MIME 映射 ├── make-hash.ts # 基于 props 的缓存键哈希 ├── help-text.ts # 启动提示文案 └── send-file.ts # 流式回写响应 ├── Dockerfile # 可部署的容器化服务器镜像 ├── remotion.config.ts # CLI/打包配置 └── package.json下文先讲本地设计与渲染再深入服务端实现。第一步本地设计模式Remotion Studio在模板目录下安装依赖后进入设计模式即可实时编辑 React 组件并预览画面npm run dev该命令实际执行的是 package.json 中定义的remotion studio。Remotion Studio 会打开可视化界面左侧列出注册的 composition右侧实时渲染当前画面。本模板注册的唯一 composition 在 src/Root.tsx 中定义Still idPreviewCard component{PreviewCard} width{1200} height{627} schema{myCompSchema} defaultProps{{ title: Welcome to Remotion, description: Edit Video.tsx to change template, color: #0B84F3, }} /Still是 Remotion 面向单帧静态图的内置组件。1200×627 正是主流社交平台 Open Graph 图片推荐比例。组件的入参props通过 Zod schema 声明这让 Studio 能自动生成可视化表单用于调参。页面组件本体在 src/PreviewCard.tsxexport const myCompSchema z.object({ title: z.string(), description: z.string(), color: zColor(), });其中color使用remotion/zod-types提供的zColor()类型Studio 中会渲染为取色器并且值除了十六进制色值外还兼容多种 CSS 颜色表示。组件内部用普通 React 内联样式排版标题、描述、品牌标语并在底层叠加一层 Swirl.tsx 用原生 Canvas API 绘制随参数变化的波浪线条。值得一提的是 PreviewCard.tsx 中为文字容器设置了whiteSpace: pre-wrap注释说明这一行的用意是允许通过 URL 参数中的%0A注入换行方便调用方控制多行文案。第二步渲染成品图片在设计界面确认效果后渲染单张静态图npx remotion render它会渲染默认 compositionPreviewCard输出图片模板同时也提供了等价脚本npm run render底层命令为remotion still PreviewCard out/still.png。模板在 remotion.config.ts 中预设了Config.setRspack(true)启用 Rspack 打包并设置视频帧格式为 JPEG、输出可覆盖。如果只关心单张出图使用到这一步就已足够。保持依赖版本与 Remotion 主线同步npx remotion upgrade第三步把图片变成服务——URL 即渲染请求模板真正的亮点在内置服务器把图片渲染包装成一次 HTTP GET 请求URL 的路径与查询参数共同决定图片内容。启动服务器npm run server该脚本执行bun src/server/index.ts需要本机有 bun若用 Node 运行可先npm run make执行tsc -d编译再用npm start。服务监听process.env.PORT || 8000启动成功后会打印类似提示Go to http://localhost:8000/PreviewCard.png?titleHelloWorld in your browser to render a still image.访问下列地址即可在浏览器直接得到渲染好的图片http://localhost:8000/PreviewCard.png?titleHelloWorldURL 的三段语义在 src/server/index.ts 中体现URL 片段作用/:compositionname指定要渲染的 composition 的 ID路由正则限定为/:name.:format(png|jpe?g).:format以.png或.jpeg/.jpg结尾决定输出图片格式?query查询参数作为 inputProps 传入 React 组件例如?titleHelloWorlddescriptionfoobar服务端会把整份 query 对象作为inputProps传给组件等价于传入{title: Hello World, description: foobar}。因此任何你想动态化渲染的字段都应先加到组件的 Zod schema 中再作为查询参数拼接。由于示例组件支持%0A换行也可以这样构造多行卡片文案http://localhost:8000/PreviewCard.png?titleHello%0AWorldcolor%230B84F3服务端渲染链路一次请求在服务端内部经历了完整查询缓存 → 选片 → 渲染 → 回写缓存链路核心代码都集中在 src/server/index.ts服务启动时用remotion/bundler的bundle()把src/index.ts打成 web 入口包index.ts路由命中后先用getImageHash(JSON.stringify({compName, imageFormat, inputProps}))计算请求的 MD5 哈希作为缓存键make-hash.ts——这意味着相同 composition 相同参数会命中同一缓存若isInCache(hash)命中则直接流式返回缓存文件send-file.ts 把 Readable 管道写入 Response未命中时调用selectComposition({id, inputProps, serveUrl})选出对应 composition再renderStill({composition, output, inputProps, imageFormat})渲染到临时文件图片写回响应后saveToCache(hash, buffer)存入缓存并删除临时文件。出于稳定性考虑服务端还有两层防护见 handler.ts 与 index.ts限流通过app.set(trust proxy, 1)还原真实 IP并施加express-rate-limit每用户每分钟最多 20 次请求并发控制用p-limit把图片渲染串行化pLimit(1)避免单台机器上多个 Chrome 渲染进程相互挤压内存。任何异常都会被包装成application/json的{success: false, error}响应返回。第四步三种缓存模式服务端的缓存策略完全可配置开关集中在 src/server/config.tsexport const CACHE_MODE: CacheMode filesystem; export const AWS_BUCKET_NAME remotion-image-cache; export const AWS_REGION eu-central-1; type CacheMode filesystem | s3-bucket | none;CACHE_MODE行为适用场景filesystem默认渲染结果写入操作系统临时目录os.tmpdir()下remotion-前缀的mkdtemp目录文件名为 MD5 哈希宿主机磁盘非临时/有充足存储的平台命中后几乎零延迟none完全不做缓存每个请求实时渲染图片内容变化极频繁、不关心重复渲染开销的场景s3-bucket图片缓存到 AWS S3读写均以 MD5 哈希为对象 Key临时文件系统如 Serverless/容器重启丢盘环境下的持久缓存三者共用同一套缓存抽象isInCache/getFromCache/saveToCache定义在 cache.ts内部根据CACHE_MODE分流到本地文件读写或 S3 读写对上层路由完全透明。启用 S3 缓存切换到s3-bucket后需要两处配置在 src/server/config.ts 中把AWS_BUCKET_NAME与AWS_REGION改成你自己的桶名和区域提供具备 S3 读写权限的凭证。代码在 index.ts 中调用dotenv.config()本地开发时把仓库内的 .env.example 复制为.env并填写AWS_ACCESS_KEY_IDEnter AWS Access Key ID AWS_SECRET_ACCESS_KEYEnter secret Access Key底层 S3 客户端封装在 src/server/s3.ts使用 AWS SDK v3existsOnS3HeadObjectCommand探测对象是否存在不存在抛错则视为未命中getOnS3GetObjectCommand读取对象并把 Body 作为可读流返回writeToS3PutObjectCommand把渲染好的 Buffer 写入桶。从代码可推断整个 S3 缓存只以 MD5 哈希作为对象 Key、且未配置过期策略因此如何控制桶内对象数量、何时淘汰旧图需要你在业务侧自行规划例如配合 S3 生命周期规则。按模板 README 的指引创建 S3 桶的完整步骤是打开 S3 控制台新建 bucket可保留默认的 Deny all public access拒绝公有访问勾选——图片仅由服务器私密读写不需要公开把桶名与区域填入src/server/config.ts在 IAM 控制台新建用户并启用 Programmatic Access编程访问权限选择 Attach existing policies directly 并附加AmazonS3FullAccess在创建完成页拿到AWS_ACCESS_KEY_ID与AWS_SECRET_ACCESS_KEY本地写入.env云端部署时则写入平台的环境变量面板。第五步云端部署由于渲染依赖无头 Chrome云端部署的关键是让运行环境具备 Chromium 依赖。模板针对两类平台给出了官方路径另外提供了一个通用 Dockerfile。部署到 Heroku在 Heroku 应用的 Settings → Buildpacks 中额外添加 Google Chrome Buildpackhttps://github.com/heroku/heroku-buildpack-google-chrome这样应用启动时便会预装 Chrome 运行时供 Remotion 渲染使用随后再启动服务器进程即可。部署到 DigitalOcean模板给出了 Dockerfilepackages/template-still/Dockerfile最省事的方式是走 DigitalOcean App Platform在https://cloud.digitalocean.com/apps/new连接你的 Git 仓库直接部署。该 Dockerfile 的要点值得注意基础镜像为node:22-bookworm-slim随后apt安装libnss3、libgbm-dev、libasound2、libxkbcommon-dev等一整套 Chromium 运行所需的系统库将代码复制进容器执行npm i并以非特权用户启动EXPOSE 8000并默认执行npm run server。如果你的部署平台支持任意 Docker 镜像如各类容器 PaaS/K8s同样可以复用这个 Dockerfile 思路模板注释也说明若你并不需要服务器渲染可以安全地删除该文件。无论部署到何处都别忘了把PORT若平台指定端口以及 S3 模式下的两个 AWS 环境变量配置进平台面板。需要 Serverless 化如果希望把静态图渲染放进函数计算Lambda模板 README 明确指向了Remotion Lambda方案——它把 Remotion 渲染打包进 AWS Lambda 按需调度适用于高并发、按调用计费的场景与本文这套常驻 Express 服务器的模型不同。读者可参考仓库中 Remotion 主文档与 lambda 相关包 了解用法再根据流量模型二选一。进一步定制与维护想要改成自己的业务卡片通常只需改动三个文件src/PreviewCard.tsx重写布局、样式与 Zod schema新增字段后 URL 参数即自动生效src/Root.tsx新增/修改Stillcomposition 的 id、尺寸与defaultProps如需换字体在 fonts.css 中引入Swirl.tsx 的 Canvas 装饰也可替换为自己的图形。日常维护命令集中在 package.jsonnpm run dev进入 Studio、npm run render出图、npm run buildremotion bundle产出静态包、npm run server启动图片服务、npm run lint执行 ESLint 与 TS 类型检查npx remotion upgrade用于跟进 Remotion 版本。作为整体项目的入口还可以结合仓库根目录的 README.md 与 Remotion 文档中关于「The Fundamentals」的内容了解 composition、renderStill、Studio 等底层概念想查看renderStill与selectComposition更底层的参数语义可继续阅读 renderer 包 中的相关实现。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考