使用Vue Cropper插件轻松实现图片裁剪功能

一、什么是Vue Cropper插件

Vue Cropper插件是一个基于Vue.js的可定制的图片裁剪插件。使用此插件可以轻松地实现上传图片中对图片进行裁剪的需求。由于其使用方便，所以在Vue.js社区中得到了广泛的应用。

二、为什么要使用Vue Cropper插件

在网站开发中，我们经常需要上传图片并进行裁剪。使用原生JS实现这个需求会比较麻烦，代码量也比较大。而使用Vue Cropper插件，可以实现高度自定义的图片裁剪功能，并且使用起来非常方便。此外，该插件也支持移动端的使用，可适应不同的设备。

三、如何使用Vue Cropper插件

首先，我们需要安装Vue Cropper插件，通过npm命令进行安装，命令如下：

npm install vue-cropper

在Vue.js应用程序中，我们需要在main.js文件中引入并注册Vue Cropper插件：

//引入
import VueCropper from 'vue-cropper'
//注册
Vue.component(VueCropper)

这样就可以在Vue.js项目中使用Vue Cropper插件了。在使用时，需要在组件中添加<vue-cropper>标签，设置一些必要选项，如下所示：

<vue-cropper
  ref="cropper"
  :style="{ width: '100%', height: '400px' }"
  :guides="false"
  :view-mode="2"
  :background="false"
  :zoomable="false"
  :rotatable="false"
  :scalable="false"
  :crop-box-movable="true"
  :crop-box-resizable="true"
  :drag-mode=""move""
  :auto-crop-area="1"
  :img="imgUrl"
  :output-type=""base64""
  @crop-complete="cropImage"></vue-cropper>

其中，各个选项的意义如下：

• ref:设置vue-cropper组件的引用名，可以在组件外部调用组件方法。
• style:设置vue-cropper组件的样式，如宽度和高度。
• guides:是否显示裁剪框中的虚线。
• view-mode:设置视图模式。1表示不限制宽高，2表示限制最少一个方向撑满容器。
• background:是否显示裁剪框背景图。
• zoomable:是否允许缩放。
• rotatable:是否允许旋转。
• scalable:是否允许翻转。
• crop-box-movable:是否允许裁剪框移动。
• crop-box-resizable:是否允许裁剪框调整大小。
• drag-mode:设置拖动模式。
• auto-crop-area:设置自动裁剪比例。
• img:需要裁剪的图片url地址。
• output-type:设置输出的数据类型。
• @crop-complete:设置图片裁剪完成后的回调函数。

为了方便使用和管理，我们还可以将多个的选项封装为一个组件，下面是一个例子，使用时只需要传递必要的参数即可：

<template>
  <div class="image-cropper">
    <vue-cropper
      ref="cropper"
      :img="imageUrl"
      :cropper-options="cropperOptions"
      @crop-complete="cropImage"></vue-cropper>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data () {
    return {
      cropperOptions: {
        guides: false,
        viewMode: 2,
        background: false,
        zoomable: false,
        rotatable: false,
        scalable: false,
        cropBoxMovable: true,
        cropBoxResizable: true,
        dragMode: 'move',
        autoCropArea: 1,
        outputType: 'base64'
      },
      imageUrl: ''
    }
  },
  methods: {
    cropImage () {
      const dataURL = this.$refs.cropper.getCroppedCanvas().toDataURL()
      console.log(dataURL)
    }
  }
}
</script>

四、实现图片裁剪功能的示例代码

下面是一个示例代码，使用Vue Cropper插件实现图片裁剪功能：

<template>
  <div class="image-cropper">
    <input type="file" :accept="accept" @change="uploadImage">
    <vue-cropper
      ref="cropper"
      :img="imageUrl"
      :cropper-options="cropperOptions"
      @crop-complete="cropImage"></vue-cropper>
    <div class="button-group">
      <button @click="submit">提交</button>
      <button @click="reset">重置</button>
    </div>
    <div v-if="croppedImageUrl" class="preview">
      <img :src="croppedImageUrl">
    </div>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data () {
    return {
      cropperOptions: {
        guides: false,
        viewMode: 2,
        background: false,
        zoomable: false,
        rotatable: false,
        scalable: false,
        cropBoxMovable: true,
        cropBoxResizable: true,
        dragMode: 'move',
        autoCropArea: 1,
        outputType: 'base64'
      },
      accept: 'image/png, image/jpeg',
      imageUrl: '',
      croppedImageUrl: ''
    }
  },
  methods: {
    uploadImage (event) {
      const file = event.target.files[0]
      const reader = new FileReader()
      reader.onload = (event) => {
        this.imageUrl = event.target.result
      }
      reader.readAsDataURL(file)
    },
    cropImage () {
      this.croppedImageUrl = this.$refs.cropper.getCroppedCanvas().toDataURL()
    },
    submit () {
      // do something with cropped image
      console.log(this.croppedImageUrl)
      this.reset()
    },
    reset () {
      this.$refs.cropper.reset()
      this.croppedImageUrl = ''
    }
  }
}
</script>