当前位置：首页 > VUE

vue实现图片剪切

2026-03-09 16:51:20VUE

实现图片剪切的步骤

使用 Vue 实现图片剪切功能可以通过以下方法完成，结合 HTML5 的 Canvas 和第三方库（如 cropperjs）来实现。

安装 Cropper.js 库

Cropper.js 是一个流行的图片裁剪库，支持拖拽、缩放和旋转等功能。在 Vue 项目中安装：

npm install cropperjs

引入 Cropper.js 并初始化

在 Vue 组件中引入 Cropper.js 并初始化裁剪器：

<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, // 裁剪比例（1:1）
        viewMode: 1,    // 限制裁剪框不超过图片范围
      });
    },
    cropImage() {
      if (!this.cropper) return;
      const canvas = this.cropper.getCroppedCanvas();
      const croppedImageUrl = canvas.toDataURL('image/jpeg');
      // 可以下载或上传裁剪后的图片
      console.log(croppedImageUrl);
    },
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
    }
  },
};
</script>

自定义裁剪功能

如果需要手动实现裁剪功能，可以使用 HTML5 Canvas：

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

<script>
export default {
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        const img = new Image();
        img.onload = () => {
          const canvas = this.$refs.canvas;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const croppedData = ctx.getImageData(50, 50, 200, 200); // 裁剪区域 (x, y, width, height)

      const newCanvas = document.createElement('canvas');
      newCanvas.width = 200;
      newCanvas.height = 200;
      const newCtx = newCanvas.getContext('2d');
      newCtx.putImageData(croppedData, 0, 0);

      const croppedImageUrl = newCanvas.toDataURL('image/jpeg');
      console.log(croppedImageUrl);
    },
  },
};
</script>

上传裁剪后的图片

将裁剪后的图片转换为 Blob 或 FormData 上传到服务器：

vue实现图片剪切

cropImage() {
  const canvas = this.cropper.getCroppedCanvas();
  canvas.toBlob((blob) => {
    const formData = new FormData();
    formData.append('file', blob, 'cropped-image.jpg');

    // 使用 axios 或其他 HTTP 库上传
    axios.post('/upload', formData).then(response => {
      console.log('上传成功', response);
    });
  }, 'image/jpeg');
}