vue实现图片编辑

Vue实现图片编辑的方法

使用第三方库vue-cropper

安装vue-cropper库：

npm install vue-cropperjs

在Vue组件中使用：

<template>
  <div>
    <input type="file" @change="uploadImage"/>
    <vue-cropper
      ref="cropper"
      :src="imgSrc"
      :aspect-ratio="16/9"
    />
    <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>

使用fabric.js实现更高级编辑

安装fabric.js：

npm install fabric

基础实现示例：

<template>
  <div>
    <input type="file" @change="loadImage"/>
    <canvas id="canvas" width="500" height="500"></canvas>
    <button @click="addText">添加文字</button>
    <button @click="saveImage">保存图片</button>
  </div>
</template>

<script>
import { fabric } from 'fabric';

export default {
  mounted() {
    this.canvas = new fabric.Canvas('canvas');
  },
  methods: {
    loadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        fabric.Image.fromURL(event.target.result, (img) => {
          this.canvas.add(img);
        });
      };
      reader.readAsDataURL(file);
    },
    addText() {
      const text = new fabric.Text('示例文字', {
        left: 100,
        top: 100,
        fill: '#ff0000'
      });
      this.canvas.add(text);
    },
    saveImage() {
      const dataURL = this.canvas.toDataURL({
        format: 'png',
        quality: 0.8
      });
      // 可以在这里处理保存或上传逻辑
      console.log(dataURL);
    }
  }
}
</script>

使用vue-picture-editor

安装vue-picture-editor：

npm install vue-picture-editor

使用示例：

<template>
  <vue-picture-editor 
    :image="imageUrl" 
    @change="handleChange"
  />
</template>

<script>
import VuePictureEditor from 'vue-picture-editor';

export default {
  components: { VuePictureEditor },
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    }
  },
  methods: {
    handleChange(data) {
      // 处理编辑后的图片数据
      console.log(data);
    }
  }
}
</script>

自定义实现基础编辑功能

对于简单的图片旋转和缩放功能，可以不依赖第三方库：

<template>
  <div>
    <input type="file" @change="loadImage"/>
    <div class="image-container">
      <img 
        ref="image" 
        :src="imageSrc" 
        :style="imageStyle"
        @load="initImage"
      />
    </div>
    <button @click="rotateImage">旋转90度</button>
    <button @click="zoomIn">放大</button>
    <button @click="zoomOut">缩小</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '',
      rotation: 0,
      scale: 1
    }
  },
  computed: {
    imageStyle() {
      return {
        transform: `rotate(${this.rotation}deg) scale(${this.scale})`
      };
    }
  },
  methods: {
    loadImage(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    rotateImage() {
      this.rotation = (this.rotation + 90) % 360;
    },
    zoomIn() {
      this.scale += 0.1;
    },
    zoomOut() {
      if (this.scale > 0.2) {
        this.scale -= 0.1;
      }
    }
  }
}
</script>

以上方法提供了从简单到复杂的图片编辑实现方案，可以根据项目需求选择合适的方案。第三方库通常提供更丰富的功能，而自定义实现则更适合简单需求或需要高度定制化的场景。