v-avatar-crop

A Vue.js avatar crop component for mobile Vue手机端头像裁剪

Usage no npm install needed!

<script type="module">
  import vAvatarCrop from 'https://cdn.skypack.dev/v-avatar-crop';
</script>

README

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 协议，请自由地享受和参与开源。