示例说明(可以直接去github下载项目运行)

H5测试

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

    import avatar from "../../components/yq-avatar/yq-avatar.vue";
    export default {
        data() {
            return {
                url: "../../static/logo.png"
            }
        },
        methods: {
            myUpload(path) {
                this.url = path;
            }
        },
        components: {
            avatar
        }
    }

使用
点击头像,选择图片进行裁剪,支持缩放、旋转

属性
selWidth、selHeight 设置裁剪区域的宽高
avatarSrc 设置头像图片
avatarStyle 设置头像样式
quality 设置导出的图片质量(0~1)

方法
upload 设置回调函数,点击上传后,参数path回传裁剪的临时图片路径


版本 变化
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. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

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