Vue Avatar Cropper

Vue Avatar Cropper是一个基于Vue.js开发的图片裁剪插件，可以用于裁剪用户头像或其他图片。

特性

• 基于Vue.js框架
• 支持移动端和PC端
• 支持图片上传和裁剪
• 支持对裁剪结果进行旋转和缩放
• 支持定制裁剪区域
• 支持多语言

安装

使用npm安装：

npm install vue-avatar-cropper --save

使用

在Vue组件中引入vue-avatar-cropper：

<template>
  <div>
    <vue-avatar-cropper :url="url" @save="onSave"></vue-avatar-cropper>
  </div>
</template>

<script>
import VueAvatarCropper from 'vue-avatar-cropper';

export default {
  components: {
    VueAvatarCropper,
  },
  data() {
    return {
      url: 'http://example.com/image.jpg',
    };
  },
  methods: {
    onSave(base64) {
      // 处理裁剪后的图片数据
    },
  },
};
</script>

Props

• url：要裁剪的图片地址
• width：裁剪区域宽度，默认为300
• height：裁剪区域高度，默认为300
• lang：显示语言，默认为en，支持en和zh-cn
• maxSize：裁剪后的图片最大大小，单位为MB，默认为5MB
• compress：是否压缩裁剪后的图片，默认为true
• outputType：裁剪后的图片输出格式，默认为jpeg，支持jpeg、png和webp

Events

• save：裁剪后的图片数据以base64格式传递给父组件

方法

• rotate：旋转图片，参数为旋转角度，单位为度数
• zoomIn：放大图片
• zoomOut：缩小图片
• reset：重置图片缩放和旋转

示例

参考官方示例

支持

如果您在使用过程中遇到问题，可以通过GitHub Issues提交bug报告。