当前位置：首页 > VUE

vue 实现图片截取

2026-02-19 08:53:37VUE

实现图片截取功能

在Vue中实现图片截取功能可以通过以下方法完成，主要依赖HTML5的Canvas API和第三方库如cropperjs。

使用cropperjs库

cropperjs是一个流行的图片裁剪库，支持多种裁剪模式。

安装cropperjs：

npm install cropperjs

在Vue组件中使用：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <img ref="image" src="" alt="Preview" />
    <button @click="cropImage">裁剪图片</button>
  </div>
</template>

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

export default {
  data() {
    return {
      cropper: null,
      imageFile: null
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      this.imageFile = file;
      const reader = new FileReader();
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result;
        this.initCropper();
      };
      reader.readAsDataURL(file);
    },
    initCropper() {
      if (this.cropper) {
        this.cropper.destroy();
      }
      this.cropper = new Cropper(this.$refs.image, {
        aspectRatio: 1,
        viewMode: 1,
      });
    },
    cropImage() {
      if (!this.cropper) return;
      const canvas = this.cropper.getCroppedCanvas();
      const croppedImage = canvas.toDataURL('image/jpeg');
      // 处理裁剪后的图片
      console.log(croppedImage);
    }
  }
};
</script>

使用纯Canvas API实现

如果不依赖第三方库，可以使用原生Canvas API实现基本裁剪功能。

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*" />
    <canvas ref="canvas"></canvas>
    <button @click="cropImage">裁剪</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      ctx: null,
      cropArea: { x: 0, y: 0, width: 100, height: 100 }
    };
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.image = new Image();
        this.image.onload = () => {
          this.$refs.canvas.width = this.image.width;
          this.$refs.canvas.height = this.image.height;
          this.ctx.drawImage(this.image, 0, 0);
        };
        this.image.src = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      if (!this.image) return;
      const cropped = document.createElement('canvas');
      cropped.width = this.cropArea.width;
      cropped.height = this.cropArea.height;
      const ctx = cropped.getContext('2d');
      ctx.drawImage(
        this.image,
        this.cropArea.x, this.cropArea.y,
        this.cropArea.width, this.cropArea.height,
        0, 0,
        this.cropArea.width, this.cropArea.height
      );
      const croppedImage = cropped.toDataURL('image/jpeg');
      console.log(croppedImage);
    }
  }
};
</script>