vue实现图片剪切

Vue 实现图片裁剪的方法

使用第三方库 vue-cropperjs

安装 vue-cropperjs 库：

npm install vue-cropperjs

在 Vue 组件中引入并使用：

<template>
  <div>
    <input type="file" @change="uploadImage" accept="image/*">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="16/9"
      :auto-crop-area="0.8"
    ></vue-cropper>
    <button @click="cropImage">裁剪图片</button>
    <img :src="croppedImage" v-if="croppedImage">
  </div>
</template>

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

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imgSrc: '',
      croppedImage: ''
    };
  },
  methods: {
    uploadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imgSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          this.croppedImage = event.target.result;
        };
        reader.readAsDataURL(blob);
      });
    }
  }
};
</script>

使用原生 Canvas API 实现

创建一个自定义图片裁剪组件：

<template>
  <div>
    <input type="file" @change="handleFileChange" accept="image/*">
    <div class="cropper-container" ref="container">
      <img ref="image" :src="imgSrc" v-if="imgSrc">
    </div>
    <button @click="crop">裁剪</button>
    <div v-if="result">
      <img :src="result">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: '',
      result: '',
      cropData: {
        x: 0,
        y: 0,
        width: 100,
        height: 100
      }
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imgSrc = event.target.result;
        this.$nextTick(() => {
          this.initCropper();
        });
      };
      reader.readAsDataURL(file);
    },
    initCropper() {
      const image = this.$refs.image;
      const container = this.$refs.container;

      image.onload = () => {
        const ratio = Math.min(
          container.offsetWidth / image.naturalWidth,
          container.offsetHeight / image.naturalHeight
        );
        image.style.width = `${image.naturalWidth * ratio}px`;
        image.style.height = `${image.naturalHeight * ratio}px`;
      };
    },
    crop() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const image = this.$refs.image;

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

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

      this.result = canvas.toDataURL('image/jpeg');
    }
  }
};
</script>

<style>
.cropper-container {
  width: 500px;
  height: 500px;
  overflow: hidden;
  position: relative;
}
</style>

实现拖拽选择裁剪区域

扩展原生 Canvas 实现，添加鼠标交互：

// 在 data 中添加
data() {
  return {
    // ...其他数据
    isDragging: false,
    startX: 0,
    startY: 0
  }
},

// 添加方法
methods: {
  // ...其他方法
  handleMouseDown(e) {
    this.isDragging = true;
    this.startX = e.offsetX;
    this.startY = e.offsetY;
    this.cropData.x = e.offsetX;
    this.cropData.y = e.offsetY;
  },
  handleMouseMove(e) {
    if (!this.isDragging) return;

    this.cropData.width = e.offsetX - this.startX;
    this.cropData.height = e.offsetY - this.startY;

    // 可以在这里添加绘制选择框的逻辑
  },
  handleMouseUp() {
    this.isDragging = false;
  }
},

// 在 mounted 中添加事件监听
mounted() {
  const container = this.$refs.container;
  container.addEventListener('mousedown', this.handleMouseDown);
  container.addEventListener('mousemove', this.handleMouseMove);
  container.addEventListener('mouseup', this.handleMouseUp);
}

注意事项

• 对于移动端支持，需要添加触摸事件处理
• 考虑添加缩放功能以便更精确地选择裁剪区域
• 可以添加固定比例选项，如1:1、4:3等
• 处理大图片时需要考虑性能问题，可能需要压缩或分块处理

以上方法提供了从简单到相对完整的图片裁剪实现方案，可根据项目需求选择合适的方案。第三方库方案更适合快速实现，原生方案则提供更多自定义可能性。