更新记录

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 ,为空时输出图片与原图格式一致

隐私、权限声明

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

相册,摄像头

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

插件不采集任何数据

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

许可协议

MIT协议

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