当前位置：首页 > VUE

vue实现图片剪切

2026-01-17 11:27:16VUE

Vue 实现图片裁剪的方法

在 Vue 中实现图片裁剪功能，可以通过以下两种常见方式完成：

使用第三方库 cropperjs

安装 cropperjs 库：

npm install cropperjs

在 Vue 组件中使用：

<template>
  <div>
    <img ref="image" src="your-image-source.jpg">
    <button @click="crop">裁剪</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  mounted() {
    this.cropper = new Cropper(this.$refs.image, {
      aspectRatio: 16 / 9,
      viewMode: 1,
    });
  },
  methods: {
    crop() {
      const croppedCanvas = this.cropper.getCroppedCanvas();
      // 处理裁剪后的图片
      document.body.appendChild(croppedCanvas);
    }
  }
}
</script>

使用 vue-cropper 组件

安装 vue-cropper：

npm install vue-cropper

在 Vue 组件中使用：

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :img="imgSrc"
      :autoCrop="true"
      :autoCropWidth="200"
      :autoCropHeight="200"
    ></vue-cropper>
    <button @click="crop">裁剪</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper';

export default {
  components: { VueCropper },
  data() {
    return {
      imgSrc: 'your-image-source.jpg'
    }
  },
  methods: {
    crop() {
      this.$refs.cropper.getCropData(data => {
        // 处理裁剪后的base64数据
        console.log(data);
      });
    }
  }
}
</script>

实现自定义裁剪功能

对于简单的自定义裁剪功能，可以使用以下方法：

<template>
  <div>
    <div class="image-container" ref="container">
      <img :src="imgSrc" ref="image" @load="initCrop">
    </div>
    <div class="crop-box" ref="cropBox"></div>
    <button @click="getCroppedImage">获取裁剪图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: 'your-image.jpg',
      cropData: {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    }
  },
  methods: {
    initCrop() {
      // 初始化裁剪框位置和大小
      this.$refs.cropBox.style.width = `${this.cropData.width}px`;
      this.$refs.cropBox.style.height = `${this.cropData.height}px`;
      this.$refs.cropBox.style.left = `${this.cropData.x}px`;
      this.$refs.cropBox.style.top = `${this.cropData.y}px`;

      // 添加拖拽功能
      this.addDragEvents();
    },
    addDragEvents() {
      // 实现拖拽逻辑
      const cropBox = this.$refs.cropBox;
      let isDragging = false;

      cropBox.addEventListener('mousedown', (e) => {
        isDragging = true;
      });

      document.addEventListener('mousemove', (e) => {
        if (isDragging) {
          // 更新裁剪框位置
          cropBox.style.left = `${e.clientX}px`;
          cropBox.style.top = `${e.clientY}px`;
        }
      });

      document.addEventListener('mouseup', () => {
        isDragging = false;
      });
    },
    getCroppedImage() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = this.$refs.image;

      canvas.width = this.cropData.width;
      canvas.height = this.cropData.height;

      ctx.drawImage(
        img,
        this.cropData.x, this.cropData.y,
        this.cropData.width, this.cropData.height,
        0, 0,
        this.cropData.width, this.cropData.height
      );

      const croppedImage = canvas.toDataURL('image/png');
      // 处理裁剪后的图片
      console.log(croppedImage);
    }
  }
}
</script>

<style>
.image-container {
  position: relative;
}
.crop-box {
  position: absolute;
  border: 2px dashed #fff;
  cursor: move;
}
</style>