微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React Native 和 FFMPEG 以不同的方式呈现文本

如何解决React Native 和 FFMPEG 以不同的方式呈现文本

我正在 React Native 中创建一个视频编辑应用程序,它允许您将字幕刻录到任何视频上。我遇到的问题是手机屏幕上的字体大小与视频渲染后的字体大小不匹配。

我可以保证文本在应用端被适当缩小,因为视频在手机屏幕上看起来明显比原始尺寸小。因此,我作为预览放置在视频顶部的文本需要相应地缩小。

问题是当我渲染视频时,每种不同的字体似乎都有不同的比例因子。所以预览器总是关闭的。我的解决方案是手动放大/缩小每种字体的大致宽度和高度因子。但这是一个非常糟糕的解决方案。

我认为它与可以在 ffmpeg 上设置的 font.config 文件有关。

我如何制作例如。 React Native 中的 Arial,14 与 ffmpeg 上的 Arial,14 的渲染方式相同吗?我真的需要帮助。我什至不知道去哪里找。

更新示例***

如您所见,我正在尝试在原始视频上渲染大小为 93 的字幕。

enter image description here

由于手机屏幕上呈现的视频比原始视频小,我计算了一个调整大小因子,即:

let resizefactor = originalVideoHeight / renderedVideoHeightOnApp

现在我只是调整了应用程序上的文本大小,如下所示:

let resizedFontSize = videoFontSize/resizefactor

这样做之后,预览文本的大小将被调整为比原始视频小 N 倍。 N 与视频本身调整大小以进行渲染的数字相同。所以一切都应该看起来很完美。

但问题是每个字体的行为不同,每个字体的调整大小错误也不同。没有模式。

还有一个 Open-SansRegular 字体示例:

enter image description here

还有一个 Arial 字体示例:

enter image description here

我的解决方案是在第一个逻辑 resizefactor 之上手动为字体高度选择另一个调整大小因子。

这不是一个好的解决方案,因为用户无法添加自己的字体,因为我需要先“校准”它们中的每一个

enter image description here

我还尝试将应用上的文本呈现为与视频上的文本大小相同,然后应用转换:[{scale: 1/resizefactor}]。也不好看。

我能得到的唯一结论是 React Native 和 FFMPEG 对字体的编码方式不同,我需要对该编码进行标准化。也许有一些我什至不明白的花哨的 font.config 文件

但它在 FFMPEG 文档中:

  1. 使用您自己的 fontconfig 配置。

RNFFmpegConfig.setFontconfigConfigurationPath('');

我还想指出,我已经在 Aegisub Advanced SubStation Alpha 文件上正确设置了 PlayResX 和 PlayResY 值。我什至试图弄乱 FFMPEG original_size 过滤器。没有任何效果

解决方法

最后,我最终在 React Native 上以我想要的字体大小预渲染文本,并使用 Text 的 OnTextLayout 属性获取行信息。

我只是将渲染文本的渲染高度除以实际预期字体大小并得到一个幻数,所以我将预期字体大小乘以该幻数,现在文本以完全正确的大小呈现。

请注意,每种字体都有不同的调整大小因子(“幻数”)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。