如何下载和导出渐变

GradLab 提供三种导出方式，分别适用于不同场景。本指南介绍每种格式的使用时机和最佳设置。

PNG——下载静态图片

适用场景： 静态设计稿、社交媒体发帖、UI 原型图、印刷品、演示文稿。

1. 在画布上完成渐变设计
2. 点击面板中的下载当前帧
3. .png 文件即时下载

分辨率： 输出像素 = 画布 W/H × Math.max(2, devicePixelRatio) × 所选 1×／2×／3× 导出倍率。DPR 为 2 时，640×360 画布以 3× 导出为 3840×2160。

TIP

通过画布 W/H 设置目标比例，再检查导出倍率旁显示的实际像素尺寸。画布尺寸不等于输出像素尺寸。

MP4——下载渐变视频

适用场景： 网站 Hero 区视频背景、社交媒体视频、动态演示文稿、动效素材。

1. 在面板中启用 Ping-pong Loop（推荐，可生成无缝循环）
2. 点击录制 MP4
3. 让动画运行所需时长（3–8 秒为宜）
4. 点击停止录制
5. GradLab 编码完成后自动下载 .mp4 文件

格式： MP4（H.264），以固定 30 fps 离线渲染；目前 Chrome 和 Edge 的 WebCodecs H.264 支持最稳定。

INFO

Ping-pong Loop 会让动画正放后再倒放，形成无剪切点的完美循环。

缩小文件体积的技巧：

• 录制 4–6 秒而非更长
• 网络使用时画布建议不超过 1280 × 720
• 录制前降低 Speed 滑块，获得更平缓、压缩率更高的视频

HTML——下载独立渐变文件

适用场景： 嵌入网页、分享保持动画的渐变、归档渐变配置。

1. 点击导出代码
2. 在弹窗中点击下载代码保存 .html 文件

导出的文件完全独立——包含 WebGL 着色器、着色器与效果参数值和渲染循环，无外部依赖，可离线在支持 WebGL 的浏览器中打开。

导出 HTML 的使用方式：

使用场景	方法
嵌入网站	通过 <iframe> 引用
全屏背景	直接在浏览器标签页中打开
分享给客户	发送单个文件，对方可在任意浏览器打开
归档配置	所有渐变参数均已内嵌

<iframe
  src="your-gradient.html"
  style="width:100%; height:100%; border:none;"
></iframe>

参数代码下载

导出代码弹窗底部的下载参数码按钮会保存一张包含 DataMatrix 恢复码的小型 PNG 图片。为了让图形编码保持小巧、便于扫描，图片中只包含短 ID，完整渐变参数由 GradLab 后端保存。

需要恢复时，可在调色盘区域点击上传图片 / 参数码，或者把 PNG 拖放到 GradLab 页面任意位置。GradLab 会读取短 ID、获取参数并自动恢复配置。恢复过程需要联网，请将这张 PNG 视为对应配置的恢复凭证。

为什么保留参数码？

我们希望为未来的作品分享提供一种简洁、有辨识度的图形码：分享一张小巧的图片，对方就能恢复可编辑的渐变设置。当前使用的是 DataMatrix 二维码；让图形码只保存短 ID，可以避免参数增加后图案变得过大、过密。

早期我们也考虑过将完整配置直接编码进图形码，让保存和恢复都在本地完成。GradLab 的配置包含较多参数，而像这样简洁的、小矩阵 DataMatrix 能承载的信息有限。DataMatrix 可以通过增加矩阵尺寸容纳更多数据，但完整配置会让图案更大、更密，偏离我们希望它保持简约、美观、便于分享的初衷。

因此，当前图形码保存的是用于关联配置的专属短字符串；恢复时，GradLab 通过它从后端读取对应参数。这不是把完整配置压缩进几位字符，也不是加密。采用后端存储的出发点是兼顾图形码的简洁与配置恢复，并非为了收集用户数据；但当前实现确实会保存你主动导出的配置，具体范围见下方隐私说明。

**我们仍希望探索完全本地的方案。**如果你有更好的编码、压缩或文件封装方案，能够兼顾小巧的图形码与完整配置恢复，欢迎通过网站 Feedback 或邮件分享建议。现有参数码仍依赖后端与网络，本地方案是希望探索的方向，并非已经提供的功能。

参数码不包含图片弥散的原始背景图，也不保存画布尺寸、导出倍率或当前动画／鼠标交互状态。恢复图片弥散时，需要重新上传背景图片。

保存内容与隐私

只有在你点击下载参数码时，对应的创作参数才会通过此功能保存到 GradLab 后端，包括颜色、效果设置、画面位置以及 ASCII 自定义文字。参数记录不包含反馈邮箱或上传图片的原始文件。

**任何获得参数码或其中短 ID 的人，都可以读取并恢复对应设置，无需登录。**它是分享与恢复凭证，不是受权限保护的私密备份。请勿在待分享的自定义文字中填写敏感信息。

当前参数记录没有自动过期，也尚未提供用户自行删除或撤销参数码的入口；恢复依赖 GradLab 服务可用。若希望仅在本地保存、不使用参数存储服务，可选择下载代码保存独立 HTML 文件。HTML 同样包含创作参数，分享前也请检查其中的自定义文字。

导出格式对比

格式	文件类型	动画	依赖	适用场景
PNG	.png	否	无	静态设计、印刷
视频	.mp4	是	无	网站背景、社交视频
HTML	.html	是	无	网页嵌入、分享
参数码	.png DataMatrix	否	GradLab 服务	恢复和分享可编辑参数

相关内容

• 动态渐变背景
• 渐变视频背景
• 嵌入网站