深度技术指南与知识库
Reels 与 TikTok 安全区预览：9:16 竖屏构图、界面遮挡检测与纯净导出
Instagram Reels、Stories 以及 TikTok 等垂直短视频格式普遍采用标准的 9:16 宽高比（通常为 1080×1920 像素）。然而，各平台的原生移动客户端会在视频内容上方叠加明显的界面控件——包括创作者头像、关注按钮、点赞与评论互动栏、标题描述、音频图标及手机系统状态栏等。如果关键文字、行动号召（CTA）或品牌图标放置得太靠近屏幕边缘，极易被这些控件完全遮挡。Reels 与 TikTok 安全区预览工具通过在客户端运行精确的几何计算，帮助创作者在视频发布前验证核心元素在自然信息流和信息流广告中均能清晰可见。
典型使用场景： 创作者制作了一条 1080×1920 像素的宣传视频，字幕设计在画面下部三分之一处。将素材载入预览工具后，系统会依据 Meta 官方规范（顶部保留 14%、底部保留 35%、左右各保留 6% 的无干扰安全区域）及 TikTok 信息流广告规范，自动计算界面遮挡交集。若创作者的 Logo 位于 Y=1650px 位置，系统会立即提示其与底部文案及音频组件发生遮挡冲突。通过在“适应（留黑边）”与“填充（裁剪）”模式间切换，或微调垂直画面位移，创作者可在发布前将关键视觉焦点精准移至安全区内。
所有素材渲染、视频时间轴滑动预览、关键帧截取和图像导出均100% 在浏览器本地内存中完成（利用 HTML5 Canvas 与 HTMLVideoElement API）。您的原始文件绝不会上传至 GoToolstack 服务器或任何第三方平台。导出的图像纯净整洁，绝不包含手机边框、辅助参考线或水印。
计算公式与底层原理推导
Safe Box = [X: W × m_left, Y: H × m_top, W_safe: W × (1 - m_left - m_right), H_safe: H × (1 - m_top - m_bottom)]
在 1080×1920 设计画布上针对归一化布局坐标执行轴对齐包围盒（AABB）相交测试。
最佳实践与工程实战指南
- 字幕需避开底部交互区域： 建议将字幕及行动号召文案安排在 Y=650px 至 Y=1350px 之间，避免被底部的文字描述、互动按键及赞助商链接遮盖。
- 注意右侧互动功能栏： 在 TikTok 和 Reels 中，点赞、评论与分享按钮占据屏幕右侧约 120–140 像素的纵向区域；请勿在右侧边缘靠齐放置重要标志（阿语等 RTL 布局则位于左侧）。
- 区分自然信息流与付费赞助广告： 商业赞助广告在底部带有常驻的大尺寸 CTA 按钮横幅；在投放付费推广前请同时核对两种模板。
- 导出纯净素材： 导出的图片文件仅保留您调整校准后的设计画面，不带任何测试遮罩或边框，确保可直接上传至各官方平台。
常见问题解答 (FAQ)
为什么不同用户的手机上界面遮挡位置会有所不同？
不同手机屏幕宽高比差异较大，从早期的 16:9 到如今带有摄像头挖孔和手势条的 19.5:9 或 20:9 全面屏，平台客户端会动态调整控件布局间距。
我的图片或视频文件会被上传到服务器吗？
不会。文件解码、时间轴拖动、安全区运算以及图像导出全部在您的本地浏览器内存中进行，期间不向任何外部服务器发送任何文件或数据。
下载的文件中会包含手机外框或安全区红线吗？
不会。导出程序会在离屏 Canvas 画布上根据设定的变换参数独立绘制，下载的图片和截取的帧画面完全纯净无杂质。
可以直接从该工具导出裁切后的视频吗？
在裁剪模式下，若浏览器支持 WebCodecs/Canvas，可实现前端视频画面裁剪或转接至视频裁剪工具；在适应模式下，可导出高分辨率 PNG 或 JPEG 关键帧画面。