更新记录

0.5.4（2021-01-08） 下载此版本

• 修复ImgUrl显示问题
• 添加导出图像形状设置属性
• 优化若干样式

0.5.3（2021-01-07） 下载此版本

取消关闭事件

0.5.2（2021-01-07） 下载此版本

13

平台兼容性

uni-app

uni-app x

圆形图片裁切插件使用说明

0.5.4文档

适用平台

• 小程序
• H5

  使用场景

• 圆形图像编辑时，需要拖动和缩放图片查看编辑效果
• 页面为全屏的

使用方法

html

<Cropper 
        v-if="showCropper" 
        @close="showCropper=false"
        @drawSuccess="drawSuccess"
        @drawFail="drawFail"
        @uploadSuccess="uploadSuccess"
        @uploadFail="uploadFail"
    shape="circle"
        imgUrl="/static/circle-avatar-cropper/baolong.jpg"
></Cropper>

script

import Cropper from '@/components/circle-avatar-cropper/cropper.vue'
    export default {
        components:{Cropper},
        data() {
            return {
                showCropper: false
            }
        },
        onLoad() {

        },
        methods: {
            drawSuccess(res){console.log('裁切成功',res)},
            drawFail(res){console.log('裁切失败',res)},
            uploadSuccess(res){console.log('上传成功',res)},
            uploadFail(res){console.log('上传失败',res)}
        }
    }

参数

事件

注意事项

• 小程序存在性能问题，后续有事件，小程序考虑用wsx重新编写
• H5下载图片在不同浏览器存在差异，所以用了长按图片方式实现（试过a标签的下载方法，电脑的浏览器可以，手机的能调出下载框但下载不了）
• 本插件依赖 sass