vue2使用图片撤销裁剪橡皮擦等功能

在vue2中实现图片撤销、裁剪、橡皮擦等功能，可以使用第三方插件vue-cropperjs和vue-eraser。

1. 使用vue-cropperjs插件实现图片裁剪功能：

首先在项目中安装vue-cropperjs插件：

npm install vue-cropperjs --save

然后在vue组件中引入该插件：

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      image: '',
      cropperOptions: {
        viewMode: 1,
        aspectRatio: 16 / 9,
        autoCropArea: 1,
        movable: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        dragMode: 'none'
      }
    };
  },
  methods: {
    crop() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        // 处理裁剪后的图片
      });
    }
  }
};

在template中使用vue-cropper组件：

<vue-cropper ref="cropper" :src="image" :options="cropperOptions"></vue-cropper>
<button @click="crop">裁剪</button>

2. 使用vue-eraser插件实现橡皮擦功能：

首先在项目中安装vue-eraser插件：

npm install vue-eraser --save

然后在vue组件中引入该插件：

import VueEraser from 'vue-eraser';

export default {
  components: {
    VueEraser
  },
  data() {
    return {
      image: '',
      canvasWidth: 500,
      canvasHeight: 500,
      eraserSize: 10
    };
  },
  methods: {
    erase() {
      let canvas = this.$refs.eraser.canvas;
      let ctx = canvas.getContext('2d');
      ctx.globalCompositeOperation = 'destination-out';
      ctx.beginPath();
      ctx.arc(canvas.width / 2, canvas.height / 2, this.eraserSize, 0, 2 * Math.PI, true);
      ctx.fill();
      ctx.globalCompositeOperation = 'source-over';
    }
  }
};

在template中使用vue-eraser组件：

<vue-eraser ref="eraser" :width="canvasWidth" :height="canvasHeight" :size="eraserSize" :image="image"></vue-eraser>
<button @click="erase">擦除</button>

以上就是使用vue2实现图片撤销、裁剪、橡皮擦等功能的方法，希望能对你有所帮助！