更新记录
1.0.0(2020-10-13) 下载此版本
两种压缩模式:
1.等比例:宽高等比例缩放
2.指定尺寸:压缩到指定宽高
H5,小程序返回base64,app返回临时路径
平台兼容性
插件引入:
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 ,为空时输出图片与原图格式一致 | 否 |