更新记录
1.1.5(2023-06-18)
下载此版本
1、修复图片获取异常处理
2、组件重复ID问题处理,满足二次封装要求
1.1.4(2023-05-17)
下载此版本
-
【删除】batchCompress
方法
-
【修改】部分平台会提示 uni.upx2px
的错误
1.1.3(2020-10-31)
下载此版本
1、【优化】插件代码;
2、【完善】示例功能增加图片点击预览;
查看更多
平台兼容性
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)=>{
// 压缩成功回调
})
友情提示:
- 当前项目源码使用了 ES6 和 scss 请添加运行依赖
- [插件ZIP]只包含模板文件和数据文件,不包含项目运行依赖(如 pages.json)
- [示例项目ZIP]是完整的项目文件,可下载后导入 HBuilderX 中直接运行体验
- 文件下载在当前页面的上部靠右位置,有 [下载插件ZIP] [下载示例项目ZIP] 按钮,点击即可下载