更新记录
1.0.0(2020-10-13)
两种压缩模式:
1.等比例:宽高等比例缩放
2.指定尺寸:压缩到指定宽高
H5,小程序返回base64,app返回临时路径
平台兼容性
HbuilderX/cli最低兼容版本 |
---|
2.8.13 |
uni-app
app-vue | app-nvue | app-android | app-ios |
---|---|---|---|
? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
插件引入:
import nCompress from '@/components/n-compress/n-compress.vue'
// type=1
<!-- <n-compress ref="compress" :images="images" type="1" :quality="0.92" :outputWidth="100" :outputHeight="100" outputType="jpg" @upload="upload"/> -->
// type=2
<n-compress ref="compress" :images="images" type="2" :quality="0.92" :outputScale="10" outputType="jpg" @upload="upload"/>
components: { nCompress },
调用:
// 选择图片 将获取的res传递给组件
toChooseImage () {
this.$refs['compress'].urls.length = 0;
uni.chooseImage({
count:9,
success :(res) => {
this.images = res
}
})
},
结果:
// 上传
upload (props) {
// #ifdef H5 || MP-WEIXIN
console.log('压缩后图片base64:',props)
// #endif
// #ifdef APP-PLUS
console.log('压缩后临时路径:',props)
// #endif
this.imagesUrls = props
}
参数说明:
参数名 | 类型 | 说明 | 是否必填 |
---|---|---|---|
images | Array | 图片信息 | 是 |
type | String | 压缩类型 1 指定尺寸 2 指定压缩比 | 是 |
quality | Number | 压缩质量 取值范围为 (0, 1],不在范围内时当作1.0处理 ,默认0.92 | 否 |
outputWidth | Number | 输出图片高度,type为1时必填,单位:px | 否 |
outputHeight | Number | 输出图片宽度,type为1时必填,单位:px | 否 |
outputScale | Number | 压缩比例,type为2时必填 | 否 |
outputType | String | 输出图片格式 jpg | png ,为空时输出图片与原图格式一致 | 否 |