LimeUI+1.2.2

主题

LimeShrink 图片压缩组件 ​

一个功能强大的图片压缩组件，支持多端使用。在非web端使用uni.compressImage实现，web端对齐uni.compressImage API达到全端兼容。支持单张和批量图片压缩，可自定义压缩质量、尺寸等参数。

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-shrink
  2. 导入后可能需要重新编译项目
  3. 在页面中使用组件提供的API

代码演示 ​

基础用法 ​

使用导出的compressImage函数进行图片压缩。

js
import { compressImage, LimeShrinkImageOptions } from '@/uni_modules/lime-shrink';

uni.chooseImage({
  success(res) {
    compressImage({
      // #ifndef WEB
      src: res.tempFilePaths[0],
      // #endif
      // #ifdef WEB
      // 在web端最好是传入file文件，方便知道要使用jpg还是png算法
      // 如果传入的是路径，最好有后缀如.jpg|.png
      src: res.tempFiles[0],
      // #endif
      success(res2) {
        // #ifdef WEB
        const manager = uni
        // #endif
        // #ifndef WEB
        const manager = uni.getFileSystemManager()
        // #endif
        manager.getFileInfo({
          filePath: res.tempFilePaths[0],
          success(res){
            console.log('压缩前', res.size)
          }
        })
        manager.getFileInfo({
          filePath: res2.tempFilePath,
          success(res){
            console.log('压缩后', res.size)
          }
        })
      }
    } as LimeShrinkImageOptions)
  }
})

自定义压缩参数 ​

可以设置压缩质量、压缩后的宽高等参数。

js
import { compressImage } from '@/uni_modules/lime-shrink';

compressImage({
  src: '/static/image.jpg',
  quality: 75, // 压缩质量，范围0~100
  compressedWidth: 500, // 压缩后的宽度
  // compressedHeight: 300, // 压缩后的高度，不设置则按比例缩放
  success(res) {
    console.log('压缩成功', res.tempFilePath);
  },
  fail(err) {
    console.error('压缩失败', err);
  }
})

旧版组件方式（不推荐） ​

以前的组件方式仍然保留，但不再推荐使用。

html
<l-shrink ref="shrinkRef"></l-shrink>
js
const shrinkRef = ref(null)
// 支持数组
// compressImage(file|file[], options:{quality: number})
// quality: 0-100之间，默认80
const res = await shrinkRef.value.compressImage('/static/logo.png');
// 批量
const res = await shrinkRef.value.compressImage(['/static/logo.png', '/static/logo1.png'], {quality: 75});

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-shrink/components/lime-shrink -->
<lime-shrink />

插件标签说明 ​

标签名说明
l-shrink组件标签
lime-shrink演示标签

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档 ​

compressImage 方法参数 ​

参数名说明类型默认值
src图片路径或File对象，可以是相对路径、临时文件路径、存储文件路径string | File-
quality压缩质量，范围0～100，数值越小，质量越低，压缩率越高（仅对jpg有效）number80
compressedWidth压缩后图片的宽度，单位为px，若不填写则默认以compressedHeight为准等比缩放number-
compressedHeight压缩后图片的高度，单位为px，若不填写则默认以compressedWidth为准等比缩放number-
algorithm指定压缩算法，可选值：'jpeg'、'png'string-
success接口调用成功的回调函数function-
fail接口调用失败的回调函数function-
complete接口调用结束的回调函数（调用成功、失败都会执行）function-

success 回调参数 ​

参数名说明类型
tempFilePath压缩后图片的临时文件路径string
errMsg接口调用结果信息string

fail 回调参数 ​

参数名说明类型
errCode错误码number
errMsg错误信息string

错误码说明 ​

错误码说明
1101001参数错误
1101002文件不存在
1101003文件读取失败
1101004文件类型不支持
1101005压缩失败
1101006保存失败
1101007图片加载失败
1101008Canvas操作失败
1101009未知错误
1101010权限不足

常见问题 ​

  • Web端使用注意事项：在Web端最好传入File对象，方便确定使用jpg还是png算法。如果传入的是路径，最好有后缀如.jpg或.png。
  • 压缩质量：quality参数仅对jpg格式有效，png格式不受此参数影响。
  • 等比缩放：如果只设置了compressedWidth或compressedHeight中的一个，另一个会按照原图比例自动计算。

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码