vue实现图片裁切

Vue 实现图片裁切的常用方法

使用第三方库 vue-cropperjs

安装依赖包：

npm install vue-cropperjs cropperjs

基础实现代码：

<template>
  <div>
    <input type="file" @change="uploadImage">
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="16/9"
    ></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.type.includes('image/')) {
        alert('请选择图片文件');
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        this.imgSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        this.croppedImage = URL.createObjectURL(blob);
      });
    }
  }
}
</script>

使用原生Canvas实现

基础裁切功能实现：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <canvas ref="canvas"></canvas>
    <button @click="crop">裁切</button>
    <img :src="result" v-if="result">
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,
      result: '',
      cropConfig: {
        x: 100,
        y: 100,
        width: 200,
        height: 200
      }
    }
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        this.image = new Image();
        this.image.src = event.target.result;
        this.image.onload = () => {
          this.drawImage();
        };
      };
      reader.readAsDataURL(file);
    },
    drawImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      canvas.width = this.image.width;
      canvas.height = this.image.height;
      ctx.drawImage(this.image, 0, 0);
    },
    crop() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = this.cropConfig.width;
      canvas.height = this.cropConfig.height;
      ctx.drawImage(
        this.image,
        this.cropConfig.x, this.cropConfig.y,
        this.cropConfig.width, this.cropConfig.height,
        0, 0,
        this.cropConfig.width, this.cropConfig.height
      );
      this.result = canvas.toDataURL('image/png');
    }
  }
}
</script>

移动端适配方案

针对移动端需要添加触摸事件支持：

<template>
  <div @touchstart="onTouchStart" 
       @touchmove="onTouchMove"
       @touchend="onTouchEnd">
    <!-- 裁切区域实现 -->
  </div>
</template>

<script>
export default {
  methods: {
    onTouchStart(e) {
      // 记录初始触摸位置
    },
    onTouchMove(e) {
      // 计算移动距离更新裁切框
    },
    onTouchEnd() {
      // 完成裁切
    }
  }
}
</script>

高级功能实现

添加裁切框拖拽和缩放功能：

// 在data中添加
cropBox: {
  x: 0,
  y: 0,
  width: 200,
  height: 200,
  dragging: false,
  resizing: false
}

// 添加鼠标事件处理方法
handleMouseDown(e) {
  // 判断点击位置是否在裁切框内
  // 设置dragging或resizing状态
},
handleMouseMove(e) {
  // 根据状态更新裁切框位置或尺寸
},
handleMouseUp() {
  // 清除状态
}

性能优化建议

对于大图处理建议使用Worker：

// 创建worker.js
self.onmessage = function(e) {
  const { imageData, cropParams } = e.data;
  // 执行裁切操作
  postMessage(result);
};

// 组件中调用
const worker = new Worker('worker.js');
worker.postMessage({ imageData, cropParams });
worker.onmessage = (e) => {
  this.result = e.data;
};

以上方案可根据实际需求选择使用，vue-cropperjs提供开箱即用的解决方案，而原生Canvas实现则更灵活可控。移动端需特别注意触摸事件处理，大图裁切建议采用分块处理或Web Worker优化性能。