react实现ffmpeg压缩图片和视频

在React中，直接利用FFmpeg库进行图片和视频的压缩操作可能会有些复杂，因为FFmpeg主要是用于命令行处理，而React是一个前端JavaScript框架。不过，你可以通过Node.js作为中间层，将FFmpeg命令行集成到服务器端处理，然后返回压缩后的文件给前端。 以下是一种基本步骤： 1. 安装必要的包： - 在项目目录下安装`child_process`模块（Node.js内置），用于执行系统命令。 - 如果需要处理视频，可以使用`fluent-ffmpeg`这个Node.js FFmpeg封装库，安装命令如下： ``` npm install fluent-ffmpeg ``` 2. 创建一个服务器端API（例如在Node.js express应用中）： ```javascript const ffmpeg = require('fluent-ffmpeg'); app.post('/compress', async (req, res) => { try { // 图片压缩 if (req.body.type === 'image') { // 假设你接收到了Base64编码的图片数据 const imageData = req.body.data; // 使用第三方库如sharp进行压缩 const compressedImage = await sharp(imageData) .resize(800) // 设置新尺寸 .toBuffer(); // 转换回Buffer res.send({ compressedData: compressedImage.toString('base64') }); } // 视频压缩 else if (req.body.type === 'video') { const videoPath = req.file.path; // 假设从上传的文件中获取到视频路径 const compressedVideo = await ffmpeg(videoPath) .setDuration(15) // 设置输出长度 .on('end', () => { res.sendFile(path.resolve(compressedVideo.filename)); // 返回压缩后的文件 }) .save(); // 开始压缩 } catch (error) { console.error(error); res.status(500).send('Compression failed'); } } catch (error) { console.error(error); res.status(500).send('Invalid request or error processing'); } }); ``` 3. 在React前端发起请求： 当用户选择图片或视频上传时，你可以发送POST请求到上述API地址，传递图片或视频的数据以及类型信息。