更新记录

1.0.7(2022-06-01) 下载此版本

修改插件标题

1.0.6(2022-06-01) 下载此版本

更新文档

1.0.5(2022-06-01) 下载此版本

更新文档

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × ×

jr-avatar-clip (头像裁剪)

使用方法

引入、注册组件 ,示例如下;

<template>
    <view class="">
        <jr-avatar-clip
            selWidth="480upx" 
            selHeight="480upx"
            ref='avatar' 
            fileType='png'
            :canRotate="false"
            :avatarSrc="avatar" 
            @upload="uploadHandle" 
            quality="1"
            avatarStyle="width: 45px; height: 45px;"
            >
        </jr-avatar-clip>
    </view>
</template>

<script>
    import jrAvatarClip from '@/uni_modules/jr-avatar-clip/components/jr-avatar-clip/jr-avatar-clip.vue'
    export default {
        components:{
            jrAvatarClip
        },
        data(){
            return {
                avatar: 'https://uhr-sit-1302914566.cos.ap-guangzhou.myqcloud.com/uhr/image/2022-03-08/b61a93d5-b12f-4b0b-8ace-0c7a8eadf6e7.png'
            }
        },
        methods:{
            uploadHandle(e){

            }
        }
    }
</script>

<style>
</style>

Attributes

属性 说明 类型 默认值
avatarSrc 默认头像 string -
avatarStyle 头像样式 object {width: 150upx; height: 150upx; border-radius: 100%;}
selWidth 裁剪区域的宽 string -
selHeight 裁剪区域的高 string -
fileType 裁剪出的文件类型 string -
expWidth 导出图片宽度 string -
minScale 裁剪最小的缩放值 string -
maxScale 裁剪最大的缩放值 string -
canScale 是否可以缩放 boolean false

Events

事件名称 说明 回调参数
upload 裁剪完成回调 上传完成后的Object 注:当为H5时候 取 对象中的base64属性,非H5取path属性

隐私、权限声明

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

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

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

许可协议

MIT协议

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