uni-app 请问有压缩图片的插件吗,现在相册选择出来的压缩太慢了

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

uni-app 请问有压缩图片的插件吗,现在相册选择出来的压缩太慢了

请问有压缩图片的插件吗,现在用的是相册选择图片配置的压缩,但是如果多选了几张图片,那个压缩速度简直不敢恭维。

4 回复

592944557 OR 1196097915 ,原生插件找我~ 压缩图片没问题~


回复 何处不相逢: 1??? 需要吗

uni-app 中,确实有一些插件和库可以用来压缩图片,以提升处理速度和用户体验。虽然 uni-app 本身没有内置的专门用于图片压缩的组件,但你可以借助第三方库来实现这一功能。这里推荐一个常用的库 compress.js,并结合 uni-app 的文件处理 API 来实现图片压缩。

以下是一个使用 compress.js 库在 uni-app 中压缩图片的示例代码:

  1. 安装 compress.js: 由于 uni-app 主要运行在小程序和H5环境中,直接引入npm包可能受限,因此可以通过CDN方式引入或者在HBuilderX中直接下载库文件并引入项目。

  2. 引入并使用 compress.js

// 在页面的script标签内或者单独的文件中引入compress.js
// 假设你已经将compress.js下载到了项目的static文件夹中
import compress from '@/static/compress.js'; // 根据实际路径调整

export default {
  methods: {
    compressImage(filePath) {
      return new Promise((resolve, reject) => {
        uni.getFileSystemManager().readFile({
          filePath,
          encoding: 'base64',
          success: res => {
            const base64Data = 'data:image/jpeg;base64,' + res.data;
            compress([
              {
                src: base64Data,
                quality: 0.6, // 设置压缩质量,范围0~1
                maxWidth: 1024, // 设置最大宽度
                maxHeight: 1024, // 设置最大高度
              }
            ], (result) => {
              const outputBase64 = result[0].data;
              const buffer = wx.base64ToArrayBuffer(outputBase64.split(',')[1]);
              
              // 将ArrayBuffer转换为文件路径(适用于小程序)
              uni.getFileSystemManager().writeFile({
                tempFilePath: `${wx.env.USER_DATA_PATH}/compressed_${new Date().getTime()}.jpg`,
                data: buffer,
                encoding: 'binary',
                success: writeRes => {
                  resolve(writeRes.tempFilePath); // 返回压缩后的图片路径
                },
                fail: err => {
                  reject(err);
                }
              });
            }, 'image/jpeg');
          },
          fail: err => {
            reject(err);
          }
        });
      });
    }
  }
}
  1. 使用 compressImage 方法
// 在需要压缩图片的地方调用
this.compressImage('/path/to/your/image.jpg').then(compressedPath => {
  console.log('Compressed image path:', compressedPath);
}).catch(err => {
  console.error('Error compressing image:', err);
});

注意:上述代码示例假设你已经在项目中成功引入了 compress.js 库,并且路径正确。此外,由于 uni-app 的多平台特性,不同平台(如App、H5、小程序)的文件处理方式可能有所不同,上述代码主要适用于小程序环境,对于其他平台可能需要做适当调整。

回到顶部