84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我正在使用 @use-gesture/react 和 @react-spring/web 来创建一个可拖动和可调整大小的选择器覆盖在视频上。我还能够获取选择器相对于视频元素的 x 和 y 坐标,但由于我为视频标签设置了高度和宽度,以使视频适应我的屏幕,所以我获取到的 X 和 Y 坐标在完整分辨率视频中并不处于完全相同的位置。我需要将 x 和 y 坐标传递给 ffmpeg,以模糊视频的特定部分。
要以更手动的方式实现相同的坐标转换,可以使用原始JavaScript来实现:
// 获取原始视频尺寸 const originalWidth = ...; // 获取视频的原始宽度 const originalHeight = ...; // 获取视频的原始高度 // 获取缩放后视频元素的当前宽度和高度 const scaledVideoWidth = ...; // 获取缩放后视频元素的当前宽度 const scaledVideoHeight = ...; // 获取缩放后视频元素的当前高度 // 计算缩放因子 const scaleX = originalWidth / scaledVideoWidth; const scaleY = originalHeight / scaledVideoHeight; // 用于获取选择器坐标的事件监听器 function handleSelectorDrag(x, y) { const originalX = x * scaleX; const originalY = y * scaleY; // 现在可以使用originalX和originalY执行诸如使用FFmpeg进行模糊处理等操作 // 示例:运行FFmpeg命令以在视频的某个部分进行模糊处理 const ffmpegCommand = `ffmpeg -i input.mp4 -vf "crop=w=100:h=100:x=${originalX}:y=${originalY},boxblur=10" output.mp4`; // 使用您喜欢的方法(例如,在Node.js中使用child_process)运行FFmpeg命令 } // 示例拖动事件的事件监听器 const selectorElement = document.getElementById('selector'); // 请替换为实际的选择器元素 selectorElement.addEventListener('drag', (event) => { const x = event.clientX; const y = event.clientY; handleSelectorDrag(x, y); });
请将示例中的selectorElement替换为实际的选择器元素,并根据您的具体实现调整事件监听器和选择器坐标的捕获。
selectorElement
请注意,使用JavaScript直接在浏览器中运行FFmpeg命令可能不直接,因为存在安全限制。通常,FFmpeg命令在服务器端执行,您的前端会向后端发送请求以触发这些命令。
要以更手动的方式实现相同的坐标转换,可以使用原始JavaScript来实现:
请将示例中的
selectorElement
替换为实际的选择器元素,并根据您的具体实现调整事件监听器和选择器坐标的捕获。请注意,使用JavaScript直接在浏览器中运行FFmpeg命令可能不直接,因为存在安全限制。通常,FFmpeg命令在服务器端执行,您的前端会向后端发送请求以触发这些命令。