vue实现美图秀秀功能

Vue实现美图秀秀功能

图片上传与预览

使用<input type="file">结合FileReader实现图片上传和预览功能。通过v-model绑定图片数据，利用URL.createObjectURL生成预览图。

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept="image/*">
    <img :src="previewImage" v-if="previewImage">
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewImage: null
    }
  },
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      this.previewImage = URL.createObjectURL(file);
    }
  }
}
</script>

图片裁剪功能

使用第三方库如cropperjs实现图片裁剪。在Vue中封装成组件，通过ref获取DOM元素进行初始化。

<template>
  <div>
    <img ref="image" :src="imageSrc">
  </div>
</template>

<script>
import Cropper from 'cropperjs';
export default {
  props: ['imageSrc'],
  mounted() {
    this.cropper = new Cropper(this.$refs.image, {
      aspectRatio: 1,
      viewMode: 1
    });
  },
  methods: {
    getCroppedImage() {
      return this.cropper.getCroppedCanvas().toDataURL();
    }
  }
}
</script>

滤镜效果处理

通过Canvas实现滤镜效果。创建canvas元素，使用getImageData和putImageData修改像素数据。

applyFilter(filterType) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    // 应用不同滤镜算法
    switch(filterType) {
      case 'grayscale':
        this.applyGrayscale(imageData.data);
        break;
      case 'sepia':
        this.applySepia(imageData.data);
        break;
    }

    ctx.putImageData(imageData, 0, 0);
    this.filteredImage = canvas.toDataURL();
  };
  img.src = this.currentImage;
}

applyGrayscale(pixels) {
  for (let i = 0; i < pixels.length; i += 4) {
    const avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
    pixels[i] = avg;
    pixels[i+1] = avg;
    pixels[i+2] = avg;
  }
}

贴纸和文字添加

使用CSS定位和transform实现贴纸和文字叠加。通过v-for渲染贴纸列表，使用draggable实现拖动功能。

<template>
  <div class="editor-container">
    <div class="sticker" 
         v-for="(sticker, index) in stickers"
         :key="index"
         :style="{
           top: sticker.y + 'px',
           left: sticker.x + 'px',
           transform: `rotate(${sticker.rotate}deg)`
         }"
         draggable
         @dragstart="dragStart(index, $event)"
         @dragend="dragEnd(index, $event)">
      <img :src="sticker.src">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stickers: [],
      draggingIndex: null
    }
  },
  methods: {
    dragStart(index, e) {
      this.draggingIndex = index;
      e.dataTransfer.setData('text/plain', index);
    },
    dragEnd(index, e) {
      const rect = e.target.getBoundingClientRect();
      this.stickers[index].x = rect.left;
      this.stickers[index].y = rect.top;
      this.draggingIndex = null;
    }
  }
}
</script>

保存处理结果

将Canvas转换为Blob对象，使用FileSaver.js库实现下载功能。

saveImage() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const img = new Image();

  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    // 添加水印等其他处理
    this.addWatermark(ctx);

    canvas.toBlob((blob) => {
      saveAs(blob, 'edited-image.png');
    });
  };
  img.src = this.finalImage;
}

性能优化建议

1. 使用Web Worker处理耗时的图像处理操作
2. 对大图进行分块处理避免UI阻塞
3. 实现撤销/重做功能使用命令模式记录操作历史
4. 对频繁更新的组件使用v-once优化渲染性能
5. 使用虚拟滚动优化贴纸列表的渲染

以上实现方案结合了Vue的响应式特性和原生Canvas API，可以构建出功能丰富的图片编辑应用。根据具体需求可进一步扩展美颜、抠图等高级功能。