更新记录

1.1.5(2023-06-18)

1、修复图片获取异常处理 2、组件重复ID问题处理,满足二次封装要求

1.1.4(2023-05-17)

  1. 【删除】batchCompress 方法

  2. 【修改】部分平台会提示 uni.upx2px 的错误

1.1.3(2020-10-31)

1、【优化】插件代码;

2、【完善】示例功能增加图片点击预览;

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

图片压缩

关于App平台的图片压缩问题,uniapp已经有相关的API,具体效果不清楚(没用过),与本插件比较少了H5平台的支持。文档地址:https://uniapp.dcloud.net.cn/api/media/image?id=compressimage

script 中引用组件

import helangCompress from '../../components/helang-compress/helang-compress';

export default {
    components: {
        helangCompress
    }
}

template 中添加组件

<helang-compress ref="helangCompress"></helang-compress>

方法说明:

方法名 可传参数 必填 说明
compress() Object 【单张压缩】设置压缩的图片及压缩尺寸和压缩质量,参数详情请阅读下方 compress()方法参数

compress() 方法参数:

参数名 类型 必填 默认值 说明
src String / Array - 待压缩的图片地址,由相册选择或拍照获取。注意:若src的值为String压缩成功后则返回String,若为Array,压缩成功后则返回Array
maxSize Number 1080 压缩后的最大尺寸
fileType String 'png' 压缩后的文件类型,可选值 jpg、png
quality Number 0.9 压缩后的质量(仅jpg类型有效,原因可自行阅读官方canvas文档),可选值 0 ~ 1,值越大越清晰(图片也越大)
minSize Number 640 最小压缩尺寸,图片尺寸小于该时值不压缩,非H5平台有效。若想忽略该设置可以将该值设置为一个极小的值,比如一个负数(不能是0)

为使插件在 H5 平台统一返回 base64 数据,则故意取消 H5 平台对 minSize 的设置。H5平台压缩后的图片路径是 base64 格式,有跨平台需求须注意

progress 方法回调对象属性详细说明:

参数名 类型 说明
done Number 已完成压缩的数量
fail Number 压缩失败的数量
count Number 总共需要压缩的数量

源码示例:

// 示例代码较多,请大家下载 【示例项目ZIP】进行阅读

// 单张压缩
this.$refs.helangCompress.compress({
    src:this.paths[0],
    maxSize:800,
    fileType:'jpg',
    quality:0.85,
    minSize:640 //最小压缩尺寸,图片尺寸小于该时值不压缩,非H5平台有效。若需要忽略该设置,可设置为一个极小的值,比如负数。
}).then((res)=>{
    // 压缩成功回调
}).catch((err)=>{
    // 压缩失败回调
})

// 批量压缩
this.$refs.helangCompress.compress({
    src:this.paths,
    maxSize:800,
    fileType:'jpg',
    quality:0.85,
    progress:(res)=>{
        console.log('压缩进度');
        console.log(res);
    }
}).then((res)=>{
    // 压缩成功回调
}).catch((err)=>{
    // 压缩成功回调
})

友情提示:

  1. 当前项目源码使用了 ES6 和 scss 请添加运行依赖
  2. [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
  3. [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
  4. 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问