1.1.4 • Published 5 years ago

v-avatar-crop v1.1.4

Weekly downloads
58
License
-
Repository
-
Last release
5 years ago

v-avatar-crop

vue 头像裁剪

特性

  • 头像裁剪
  • 头像拖拽缩放

demo gif

手机扫码

在线预览

说明

配套包含两个组件

  • avatarInput 封装<input type="file"/>负责选择文件
  • avatarCrop 负责头像拖拽缩放裁剪等

像往常一样使用

npm i v-avatar-crop --save

组件引用

import {avatarCrop, avatarInput} from 'v-avatar-crop'
...
...
  components: {
    [avatarCrop.name]: avatarCrop,
    [avatarInput.name]: avatarInput
  },
  methods:{
    success ({dataUrl, blob}) {
      // ajax upload img data
      this.src = dataUrl
      console.log(dataUrl)
      console.log(blob)
    },
    error (message) {
      console.log(message)
    }
  }
<template>
<div>
  <!-- size 限制图片文件大小,M单位 -->
  <avatar-input
    @success="success"
    @error="error"
    :size="4" 
    accept="image/*"
  />

  ....

  <avatar-crop
    :width="200"
    :height="200"
  ></avatar-crop>

</div>
</template>

github

其它

图片压缩代码参考来自 https://github.com/didi/mand-mobile/tree/master/components/image-reader

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago