Vue实现裁切图片功能

Vue 是一种流行的现代 JavaScript 框架，它简化了 web 应用程序的开发。在这里，我们将介绍如何使用 Vue 实现图片裁剪功能。

需求分析

在 Vue 中，我们需要一个组件，可以让用户上传图片，然后选择要裁剪的区域，最后将裁剪后的图像保存到本地或服务器。为了实现这个需求，我们可以使用以下第三方库：

1. vue-cropperjs: 可以在 Vue 中轻松使用 Cropper.js 来裁剪图像。
2. axios: 可以使用 AJAX 发送 HTTP 请求来将裁剪后的图像上传到服务器。

安装使用

安装vue-cropperjs和axios

在 Vue 项目中，使用以下命令安装 vue-cropperjs 和 axios。

npm install vue-cropperjs axios

引入库文件

在 main.js 文件中引入库文件。

import Vue from 'vue';
import Cropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
import axios from 'axios';

Vue.use(Cropper);
Vue.prototype.$axios = axios;

创建组件

在 Vue 组件中，可以使用 vue-cropperjs 容易地创建裁剪图像组件。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <vue-cropper
      ref="cropper"
      :guides="true"
      :dragMode="'move'"
      :viewMode="1"
      :aspectRatio="1"
      :autoCropArea="0.5"
      :rotatable="false"
      :scalable="false"
      :cropBoxResizable="false"
      :cropBoxMovable="false"
    />
    <button type="button" @click="onCrop">Crop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageFile: null,
    };
  },
  methods: {
    onFileChange(e) {
      this.imageFile = e.target.files[0];
    },
    onCrop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('image', blob);
        this.$axios.post('/api/image/upload', formData).then(() => {
          alert('Upload success.');
        }).catch(() => {
          alert('Upload failed.');
        });
      });
    },
  },
};
</script>

在这个组件中，我们使用 vue-cropper 组件来裁剪图像，并将裁剪后的图像保存为 Blob 对象。最后，我们使用 axios 库将 Blob 对象上传到服务器。

示例说明

下面提供两个例子来说明如何使用 Vue 和 vue-cropperjs 实现图片裁剪功能。

示例一

此示例演示如何上传和裁剪本地图像。

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <vue-cropper
      ref="cropper"
      :guides="true"
      :dragMode="'move'"
      :viewMode="1"
      :aspectRatio="1"
      :autoCropArea="0.5"
      :rotatable="false"
      :scalable="false"
      :cropBoxResizable="false"
      :cropBoxMovable="false"
    />
    <button type="button" @click="onCrop">Crop</button>
    <img :src="imageSrc" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageFile: null,
      imageSrc: null,
    };
  },
  methods: {
    onFileChange(e) {
      this.imageFile = e.target.files[0];
      this.imageSrc = URL.createObjectURL(this.imageFile);
    },
    onCrop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('image', blob);
        this.$axios.post('/api/image/upload', formData).then(() => {
          alert('Upload success.');
        }).catch(() => {
          alert('Upload failed.');
        });
      });
    },
  },
};
</script>

在此示例中，我们创建了一个可以上传图像的输入框。在 onFileChange 方法中，我们将图像文件保存为 imageFile 变量，并使用 URL.createObjectURL 创建一个临时 URL。通过将 URL 绑定到 img 标签上，即可在页面上显示图像。当用户点击“Crop”按钮时，我们只需像之前那样使用 vue-cropper 组件来裁剪图像。

示例二

在此示例中，我们使用组件的方式使用 vue-cropperjs，可以灵活地在不同的页面和组件中重用。在这个示例中，我们创建了一个名为 ImageCropper 的组件。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :guides="true"
      :dragMode="'move'"
      :viewMode="1"
      :aspectRatio="1"
      :autoCropArea="0.5"
      :rotatable="false"
      :scalable="false"
      :cropBoxResizable="false"
      :cropBoxMovable="false"
    />
    <button type="button" @click="onCrop">Crop</button>
  </div>
</template>

<script>
export default {
  name: 'ImageCropper',
  props: {
    imageSrc: {
      type: String,
      required: true,
    },
  },
  methods: {
    onCrop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('image', blob);
        this.$axios.post('/api/image/upload', formData).then(() => {
          alert('Upload success.');
        }).catch(() => {
          alert('Upload failed.');
        });
      });
    },
  },
};
</script>

<style scoped>
img {
  max-width: 100%;
}
</style>

在这个组件中，我们传递一个 imageSrc 属性，它是要裁剪的图像。在 onCrop 方法中，我们将裁剪后的图像保存为 Blob 对象，并使用 axios 库将其上传到服务器。

我们可以在其他组件中引用这个组件，如下所示：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <ImageCropper v-if="imageSrc" :image-src="imageSrc" />
  </div>
</template>

<script>
import ImageCropper from './ImageCropper.vue';

export default {
  components: {
    ImageCropper,
  },
  data() {
    return {
      imageFile: null,
      imageSrc: null,
    };
  },
  methods: {
    onFileChange(e) {
      this.imageFile = e.target.files[0];
      this.imageSrc = URL.createObjectURL(this.imageFile);
    },
  },
};
</script>

在这个组件中，我们创建了一个可以上传图像的输入框。在 onFileChange 方法中，我们将图像文件保存为 imageFile 变量，并使用 URL.createObjectURL 创建一个临时 URL。通过将 URL 绑定到 ImageCropper 组件上，即可在页面上显示图像，并使用 vue-cropper 组件来裁剪图像。