当前位置：首页 > VUE

vue实现图片剪切

2026-03-30 04:39:02VUE

实现图片剪切的方法

在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="">
  </div>
</template>

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

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

      const reader = new FileReader();
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result;
        this.initCropper();
      };
      reader.readAsDataURL(file);
    },
    initCropper() {
      new Cropper(this.$refs.image, {
        aspectRatio: 1,
        viewMode: 1,
        autoCropArea: 0.8,
      });
    }
  }
};
</script>

使用HTML5 Canvas API

如果不想依赖第三方库，可以直接使用Canvas API实现简单的图片裁剪功能。

vue实现图片剪切

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <canvas ref="canvas"></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;
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const croppedCanvas = document.createElement('canvas');
      const croppedCtx = croppedCanvas.getContext('2d');

      croppedCanvas.width = 200;
      croppedCanvas.height = 200;
      croppedCtx.drawImage(
        canvas,
        50, 50, 200, 200,
        0, 0, 200, 200
      );

      const dataURL = croppedCanvas.toDataURL('image/png');
      console.log(dataURL); // 输出裁剪后的图片数据
    }
  }
};
</script>