圆形图片裁切插件 - 更新日志

0.5.4（2021-01-08）

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

0.5.3（2021-01-07）

取消关闭事件

0.5.2（2021-01-07）

13

0.5.1（2021-01-07）

取消关闭事件

0.5.0（2021-01-06）

初版上线

0.0.0（2021-01-06）

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

0.5.0

初版

适用平台

  • 小程序
  • H5

    使用场景

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

使用方法

html

<Cropper 
        v-if="showCropper" 
        @close="showCropper=false"
        @drawSuccess="drawSuccess"
        @drawFail="drawFail"
        @uploadSuccess="uploadSuccess"
        @uploadFail="uploadFail"
></Cropper>

script

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

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

参数

名称 功能 默认值 可选值
imgUr 默认显示图片 空字符 字符串
useUpload 是否使用上传 false 布尔值
header 上传的请求头 空对象 包含请求头信息的对象
name 上传文件的键名 file 字符串
formData 自定义上传内容 空对象 对象

事件

名称 功能 返回值
close 关闭裁切窗 无
drawSuccess 裁切成功 uni.canvasToTempFilePath转换图片后带有tempFilePath的对象
drawFail 裁切失败 无
uploadSuccess 上传成功 调用uni.uploadFile上传成功后获得的对象
uploadFail 上传失败 无

注意事项

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