Vue图片裁剪功能实现代码

下面是详细讲解 Vue 图片裁剪功能实现代码的完整攻略。

1. 安装组件库

首先，我们需要使用第三方组件库来实现图片裁剪的功能。比较常用的有 Vue-Cropper 和 vue-clip。这里以 Vue-Cropper 为例，在命令行中输入以下代码进行安装：

npm install vue-cropper

2. 导入依赖

安装完 Vue-Cropper 后，我们需要在需要使用图片裁剪功能的组件中导入该依赖。可以将依赖在 Vue 组件中声明为全局变量，也可以在需要使用的组件中进行导入。这里以在组件中导入为例，代码如下：

import VueCropper from 'vue-cropper';

3. 使用组件

接下来，在需要使用图片裁剪功能的组件中添加 VueCropper 组件。可以将 cropperOptions 作为 props 传入组件中，并设置对应的值来自定义裁剪框的大小、裁剪的比例等。代码如下：

<template>
  <div>
    <vue-cropper ref="cropper" :cropperOptions="cropperOptions" :img="imgUrl"></vue-cropper>
    <button @click="getCroppedImg">裁剪图片</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgUrl: '',
      cropperOptions: {
        aspectRatio: 16 / 9, // 裁剪比例
        dragMode: 'move', // 移动模式
        viewMode: 1, // 显示模式
        autoCropArea: 1, // 自动裁剪的区域
        cropBoxMovable: true, // 裁剪框是否可以移动
        cropBoxResizable: true, // 裁剪框是否可以缩放
        toggleDragModeOnDblclick: false, // 是否可以通过双击来切换裁剪模式
        minCropBoxWidth: 60, // 最小的裁剪框宽度
        minCropBoxHeight: 30 // 最小的裁剪框高度
      },
    };
  },
  methods: {
    getCroppedImg() {
      const canvas = this.$refs.cropper.getCroppedCanvas();
      const croppedImg = canvas.toDataURL('image/png');
      console.log('裁剪后的图片：', croppedImg);
    },
  },
};
</script>

这里分别定义了 imgUrl 和 cropperOptions 两个变量，其中 imgUrl 是需要裁剪的图片地址。在 cropperOptions 中定义了裁剪框的大小、裁剪的比例、移动模式、显示模式等参数。在 getCroppedImg 方法中，调用 getCroppedCanvas() 方法来获取裁剪后的图片，并将结果输出到控制台。

示例一

下面是一个简单的示例，通过上传本地图片并裁剪，最后将裁剪后的结果输出到控制台中。代码如下：

<template>
  <div>
    <input type="file" accept="image/*" @change="uploadImg">
    <vue-cropper ref="cropper" :cropperOptions="cropperOptions" :img="imgUrl"></vue-cropper>
    <button @click="getCroppedImg">裁剪图片</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imgUrl: '',
      cropperOptions: {
        aspectRatio: 16 / 9, // 裁剪比例
        dragMode: 'move', // 移动模式
        viewMode: 1, // 显示模式
        autoCropArea: 1, // 自动裁剪的区域
        cropBoxMovable: true, // 裁剪框是否可以移动
        cropBoxResizable: true, // 裁剪框是否可以缩放
        toggleDragModeOnDblclick: false, // 是否可以通过双击来切换裁剪模式
        minCropBoxWidth: 60, // 最小的裁剪框宽度
        minCropBoxHeight: 30, // 最小的裁剪框高度
      },
    };
  },
  methods: {
    uploadImg(event) {
      const file = event.target.files[0];
      this.imgUrl = URL.createObjectURL(file);
    },
    getCroppedImg() {
      const canvas = this.$refs.cropper.getCroppedCanvas();
      const croppedImg = canvas.toDataURL('image/png');
      console.log('裁剪后的图片：', croppedImg);
    },
  },
};
</script>

示例二

下面是一个比较复杂的示例，通过选择图片库中的图片并裁剪，最后将裁剪后的结果输出到控制台中。代码如下：

<template>
  <div>
    <q-img @click="showImgPicker" :src="imgUrl" />
    <vue-cropper
      v-if="imgUrl"
      ref="cropper"
      :cropperOptions="cropperOptions"
      :img="imgUrl"
    ></vue-cropper>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';
import { QImg, QImgPicker } from 'quasar';
export default {
  components: {
    QImg,
    QImgPicker,
    VueCropper,
  },
  data() {
    return {
      cropperActive: false,
      imgUrl: '',
      cropperOptions: {
        aspectRatio: 1, // 裁剪比例
        dragMode: 'move', // 移动模式
        viewMode: 1, // 显示模式
        autoCropArea: 1, // 自动裁剪的区域
        cropBoxMovable: true, // 裁剪框是否可以移动
        cropBoxResizable: true, // 裁剪框是否可以缩放
        toggleDragModeOnDblclick: false, // 是否可以通过双击来切换裁剪模式
        minCropBoxWidth: 100, // 最小的裁剪框宽度
        minCropBoxHeight: 100, // 最小的裁剪框高度
      },
    };
  },
  methods: {
    showImgPicker() {
      this.$q.dialog({
        component: QImgPicker,
        multiple: false,
        accept: 'image/*',
        color: 'secondary',
        title: '选择图片',
        message: '请选择要裁剪的图片',
        style: 'max-width: 400px; min-width: 300px;',
        onDismiss: () => {},
        onCancel: () => {},
        onSelected: (files) => {
          this.imgUrl = URL.createObjectURL(files[0].file);
          this.cropperActive = true;
        },
      });
    },
    getCroppedImg() {
      const canvas = this.$refs.cropper.getCroppedCanvas();
      const croppedImg = canvas.toDataURL('image/png');
      console.log('裁剪后的图片：', croppedImg);
      this.cropperActive = false;
      this.imgUrl = '';
    },
  },
};
</script>

这里使用了 Quasar 组件库中的 QImg 和 QImgPicker 来实现对图片的选择和展示。在 showImgPicker 方法中，使用 $q.dialog() 方法来弹出选择图片的对话框。在对话框关闭后，将选择的文件转换成 URL 对象，然后设置 imgUrl 变量的值，使得图片被显示在页面上。在 getCroppedImg 方法中，调用 getCroppedCanvas() 方法来获取裁剪后的图片，并将结果输出到控制台。最后，再将 cropperActive 变量设置为 false，表示裁剪框已经隐藏，同时将 imgUrl 重置为空字符串，使得图片从页面上消失。

以上就是 Vue 图片裁剪功能实现代码的完整攻略。