Vue-cropper 图片裁剪的基本原理及思路讲解

Vue-cropper是一款基于Vue.js的图片裁剪组件，实现了图片的裁剪、拖动、旋转、缩放等功能。其基本原理和思路如下：

1. 加载图片
   使用HTML5的File API来加载需要裁剪的图片。用户需要选择需要裁剪的图片，通过input标签的file类型，使用户选择图片之后，触发change事件，通过event.target.files[0]获取到文件对象，进而使用FileReader读取图片数据，并通过img标签将图片展示出来。

2. 可视区域的生成
   可视区域是指用户可以看到并进行裁剪的区域。Vue-cropper的可视区域是由一个蒙层和一个图片框组成的。其中，蒙层是为了遮挡图片裁剪区域以外的部分；图片框则定义了裁剪框的大小、位置和形状。这两个元素通过CSS渲染生成。

3. 裁剪框的生成
   裁剪框是用于标识用户需要进行裁剪的区域。Vue-cropper的裁剪框是一个类似于矩形的图形，其大小、位置和形状可以通过鼠标拖动进行调整。裁剪框的生成使用了HTML5的Canvas元素，通过绘制一个矩形边框和一个虚线框来完成。

4. 图片裁剪
   图片裁剪是指将原始图片进行剪裁，生成用户需要的图片。裁剪时，首先需要计算出裁剪区域在原始图片中的实际位置、大小和形状。然后，通过Canvas元素来处理图片剪裁。具体而言，需要先创建一个与裁剪后尺寸相等的Canvas元素，并将原始图片按照裁剪区域的大小和位置在 Canvas 元素中进行绘制。绘制完成后，调用toDataURL方法将Canvas中的绘制结果转换为base64格式的图片数据，并生成一个图片文件对象。

5. 数据输出
   将裁剪出来的图片数据进行输出。Vue-cropper提供了两种输出方式，一种是通过属性绑定获取裁剪后的图片base64数据，另一种则是通过回调函数获取裁剪后的 File 对象。具体而言，通过input标签设定type为hidden，绑定v-model获取裁剪后的base64数据，或者在回调函数中通过FileReader对裁剪出来的 File 进行读取。

示例1：

<template>
  <div class="crop-container">
    <input type="file" @change="handleFileChange">
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :center="true"
      :autoCrop="true"
      :outputType="outputType"
      :fixedRatio="1"
    ></vue-cropper>
    <button @click="handleCrop">裁剪</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.min.css';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageSrc: '',
      outputType: 'dataUrl',
    };
  },
  methods: {
    handleFileChange(e) {
      if (!e.target.files.length) {
        return;
      }
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageSrc = reader.result;
      };
    },
    handleCrop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        window.URL.createObjectURL(blob);
      }, 'image/png');
    },
  },
};
</script>

以上是一个基于Vue-cropperjs的demo，通过调用vue-cropper的getCroppedCanvas方法进行图片裁剪，并使用Blob生成裁剪后的图片数据。

示例2：

<template>
  <div class="crop-container">
    <input type="file" @change="handleFileChange">
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :center="true"
      :autoCrop="true"
      :outputType="outputType"
      :fixedRatio="1"
    ></vue-cropper>
    <button @click="handleCrop">裁剪</button>
    <img :src="croppedImageUrl" v-show="croppedImageUrl" />
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.min.css';

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      imageSrc: '',
      outputType: 'file',
      croppedImageUrl: '',
    };
  },
  methods: {
    handleFileChange(e) {
      if (!e.target.files.length) {
        return;
      }
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageSrc = reader.result;
      };
    },
    handleCrop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        this.croppedImageUrl = window.URL.createObjectURL(blob);
      }, 'image/png');
    },
  },
};
</script>

以上示例增加了一个img元素，使用v-show指令来控制其显示与隐藏。在handleCrop方法中，通过Blob生成一个文件对象，并通过FileReader读取，最终将结果通过img标签展示出来。