阅读 126

vue 头像剪切

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

其它

图片压缩代码参考来自 github.com/didi/mand-m…

开源协议

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