uni-app前端实现图片、照片、拍照及录音文件的压缩功能

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app前端实现图片、照片、拍照及录音文件的压缩功能

1 回复

在uni-app中,可以通过使用第三方库或者原生插件来实现图片、照片、拍照及录音文件的压缩功能。以下是一个基本的实现思路和代码示例,涵盖了图片和录音文件的压缩。

图片压缩

对于图片压缩,我们可以使用canvas对图片进行重新绘制,以达到压缩的目的。以下是一个简单的图片压缩示例:

// 引入uni-app的文件系统模块
const fs = uni.getFileSystemManager();

// 图片压缩函数
function compressImage(src, outputPath, width, height, quality = 0.8) {
    return new Promise((resolve, reject) => {
        uni.getImageInfo({
            src: src,
            success: function(res) {
                const ctx = uni.createCanvasContext('compressCanvas');
                const targetWidth = width || res.width;
                const targetHeight = height || res.height;
                
                ctx.drawImage(res.path, 0, 0, targetWidth, targetHeight);
                ctx.draw(false, () => {
                    uni.canvasToTempFilePath({
                        canvasId: 'compressCanvas',
                        destWidth: targetWidth,
                        destHeight: targetHeight,
                        quality: quality,
                        success: function(canvasRes) {
                            resolve(canvasRes.tempFilePath);
                        },
                        fail: reject
                    });
                });
            },
            fail: reject
        });
    });
}

// 使用示例
compressImage('/path/to/image.jpg', '/path/to/output/image.jpg', 800, 600).then(compressedPath => {
    console.log('Compressed image path:', compressedPath);
}).catch(err => {
    console.error('Image compression failed:', err);
});

录音文件压缩

对于录音文件的压缩,通常需要借助第三方库或者后端服务,因为前端直接处理音频文件的压缩比较复杂。不过,如果我们只是希望减小文件大小,可以考虑降低采样率或者比特率。这里以简单的降低比特率为例(实际实现可能需要更多处理):

// 假设录音文件已经保存到临时路径tempFilePath
const tempFilePath = '/path/to/recorded/audio.mp3';
const outputPath = '/path/to/compressed/audio.mp3';

// 这里使用ffmpeg-wasm库进行音频压缩(需要提前引入ffmpeg-wasm)
ffmpeg.FS('writeFile', 'input.mp3', await fetchFile(tempFilePath));
await ffmpeg.run('-i', 'input.mp3', '-b:a', '64k', outputPath.replace(/^file:\/\//, ''));

// 获取压缩后的文件
const compressedFileBuffer = ffmpeg.FS('readFile', outputPath.replace(/^file:\/\//, ''));

// 将文件保存到本地或上传
const base64Data = 'data:audio/mpeg;base64,' + btoa(compressedFileBuffer);
// 例如,使用uni.saveFile保存文件
uni.saveFile({
    tempFilePath: base64Data,
    success: function(res) {
        console.log('Compressed audio saved:', res.savedFilePath);
    }
});

注意:ffmpeg-wasm库需要在项目中提前引入,并且由于音频处理较为复杂,前端性能可能受限。实际应用中,更推荐将音频文件上传到服务器,使用服务器端进行压缩处理。

回到顶部