更新记录

1.1.3(2019-11-29) 下载此版本

h5修复问题解决

1.1.2(2019-11-13) 下载此版本

新版本修复裁剪黑框问题,

不支持移动端。只支持小程序和h5

1.0.3(2019-09-18) 下载此版本

用法参考

查看更多

平台兼容性

用法:

//template部分
<cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100vw;height:100vw;"> 
</cropper>

//script部分
    import cropper from "../../components/cropper.vue";
    export default {
        components: {
          cropper
        },
        data() {
            return {
                 imgurl:"/static/logo.png"
            }
        },
        methods: {
            //上传返回图片
            myUpload(rsp) {
              const self = this;
              self.imgurl = rsp.path; //更新头像方式一
              // rsp.avatar.imgSrc = rsp.path; //更新头像方式二
            },

        }
    }
属性 必须 说明
selWidth 裁剪区域的宽
selHeight 裁剪区域的高
avatarSrc 头像地址
avatarStyle 头像样式,默认{width:100vw;height:100vw;}
expWidth 设置导出的图片宽度
expHeight 设置导出的图片高度
quality 生成图片质量,取值范围0~1,默认0.9
minScale 缩放允许的最小比例,默认0.3
maxScale 缩放允许的最大比例,默认4
canScale 是否允许缩放,默认true
noTab 是否存在tabBar,默认false,主要为了去除报错存信息,不设置也不影响使用
index 索引,回调upload方法,返回该index值,默认undefined
事件 必须 说明
upload 在点击上传后调用.返回格式 {avatar: xx, path: xx, index: xx, data: xx} avatar: 对象类型,可以通过更新imgSrc值,更新头像 path: 临时头像地址 index: 索引
avtinit 在图片选择后调用,可用于自定义操作,例如禁用下拉刷新,点击上传后再启用

(欢迎联系qq:1512498721)

隐私、权限声明

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

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

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

许可协议

MIT协议

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