更新记录

3.2.4(2019-06-28)

fChooseImg函数可修改inner属性


示例说明(可以直接去github下载项目运行, 有问题或讨论方法,请撩924515629)

注意:android4.4之前的版本,uniapp部分函数有bug,请使用高版本进行测试

H5测试


如果单页面使用多个裁剪框,建议使用方法二
用法一

//template部分
    <avatar 
        selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="url"
        avatarStyle="width: 200upx; height: 200upx; border-radius: 100%;">
    </avatar>

//script部分
    import avatar from "../../components/yq-avatar/yq-avatar.vue";
    export default {
        data() {
            return {
                url: "../../static/logo.png"
            }
        },
        methods: {
            myUpload(rsp) {
                this.url = rsp.path; //更新头像方式一
                //rsp.avatar.imgSrc = rsp.path; //更新头像方式二
            }
        },
        components: {
            avatar
        }
    }


用法二

//template部分
    <image :src="urls[0]" @click="clk(0)"></image>
    <image :src="urls[1]" @click="clk(1)"></image>
    <avatar @upload="myUpload" ref="avatar"></avatar>

//script部分
    import avatar from "../../components/yq-avatar/yq-avatar.vue";
    export default {
        data() {
            return {
                urls: ["../../static/logo.png","../../static/logo.png"]
            }
        },
        methods: {
            myUpload(rsp) {
                this.$set(this.urls, rsp.index, rsp.path);
            },
            clk(index) {
                this.$refs.avatar.fChooseImg(index,{
                    selWidth: "300upx", selHeight: "300upx",
                    expWidth: '260upx', expHeight: '260upx'
                });
            }
        },
        components: {
            avatar
        }
    }


属性 必须 说明
selWidth 裁剪区域的宽
selHeight 裁剪区域的高
avatarSrc 头像地址
avatarStyle 头像样式,默认{width: 150upx; height: 150upx; border-radius: 100%;}
expWidth 设置导出的图片宽度
expHeight 设置导出的图片高度
inner 只允许在图片范围内移动,并禁用一切旋转,默认false
quality 生成图片质量,取值范围0~1,默认0.9
index 索引,回调upload方法,返回该index值,默认undefined
noTab 是否存在tabBar,默认false,主要为了去除报错存信息,不设置也不影响使用
minScale 缩放允许的最小比例,默认0.3
maxScale 缩放允许的最大比例,默认4
canRotate 是否允许旋转,默认true
canScale 是否允许缩放,默认true
stretch 图片一边自动铺满裁剪框
x: x轴方向,图片自动铺满
y: y轴方向,图片自动铺满
long: 根据图片长边自动铺满
short: 根据图片短边自动铺满
longSel: 根据裁剪框长边自动铺满
shortSel: 根据裁剪框短边自动铺满
lock 锁定图片移动方向
x: 锁定x轴方向
y: 锁定y轴方向
long: 锁定图片长边方向
short: 锁定图片短边方向
longSel: 锁定裁剪框长边方向
shortSel: 锁定裁剪框短边方向


事件 必须 说明
upload

在点击上传后调用
返回格式 {avatar: xx, path: xx, index: xx, data: xx}
avatar: 对象类型,可以通过更新imgSrc值,更新头像
path: 临时头像地址
index: 索引
data: 通过fChooseImg函数设置的额外数据,默认undefined

avtinit 在图片选择后调用,可用于自定义操作,例如禁用下拉刷新,点击上传后再启用


ref可调用方法 说明
fChooseImg(index, params, data)

触发图片选择
index: 索引,默认undefined
params, 对象类型,默认undefined,可设置属性有selWidth、selHeight、expWidth、expHeight、quality、canRotate、canScale、minScale、maxScale、stretch、lock、inner
例如{
selWidth: "xx", //裁剪框宽度
selHeight: "xx", //裁剪框高度
。。。
}
data, 回调返回的额外数据,可以是任何类型,默认undefined


您的支持是开源的动力,觉得不错就给个好评给颗星,谢谢! ^-


版本 变化
3.2.4 fChooseImg函数可修改inner属性
3.2.3 禁用旋转后还可以通过按钮进行90°旋转,修改fChooseImg可设置属性
3.2.1 增加自定义前置操作avtinit,增加fChooseImg函数可设置的部分自定义属性
3.2.0 加深颜色凸显裁剪框、增加expWidth/expHeight设置导出大小
3.1.9 修复直接关闭不显示tabBar问题
3.1.8 修复提示bug
3.1.7 fChooseImg增加调用参数params/data,upload返回对象增加data字段
删除minWidth/minHeight属性
增加关闭按钮
修复图片过小时采用inner无法移动问题
3.1.6 修复stretch属性
3.1.5 增加新属性 noTab
3.1.4 增加旋转按钮
3.1.3 删除属性lockWidth/lockHeight
新增控制属性 inner/stretch/lock
新增自动触发子组件方法 fChooseImg(index)
3.1.2 新增控制属性minWidth/minHeight/minScale/maxScale/canRotate/canScale/lockWidth/lockHeight
3.1.1 调整回调返回数据内容,修复小程序报错问题
3.1.0 增加index属性,修改回调返回的数据格式
3.0.4 H5平台适配HX1.9.9
3.0.3 增加导出图片质量调整参数
3.0.2 加强对H5和Android兼容
3.0.1 如果tabBar存在,自动隐藏
3.0.0 增加色彩变化,android平台需等待官方修复bug,没有启用;其他平台测试正常
2.0.1 修复小程序预览失败
2.0.0 适配HX197、198版本,旧版可以去github下载
1.0.5 屏幕旋转后不需要重新选择图片
1.0.4 修复头像样式解析错误
1.0.3 修改样式绑定方式
1.0.2 修改按钮栏样式
1.0.1 修改按钮栏高度
1.0.0 增加H5支持

隐私、权限及商业化声明

1. 本插件需要申请的手机端权限列表:

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

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

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