详解Vue中如何实现图片处理与滤镜效果

npm install -g @vue/cli

vue create my-image-app

cd my-image-app

npm install vue2-image-input

<template>
  <div>
    <vue2-image-input
      ref="imageInput"
      v-model="selectedImage"
      :crop="true"
      :resize="true"
      :resize-options="{ width: 300, height: 300 }"
    ></vue2-image-input>
    <button @click="openImageInput">选择图片</button>
    <button @click="applyFilter">应用滤镜</button>
    <img :src="filteredImage" alt="Processed Image" />
  </div>
</template>
<script>
import Vue2ImageInput from "vue2-image-input";
export default {
  components: {
    Vue2ImageInput,
  },
  data() {
    return {
      selectedImage: null,
      filteredImage: null,
    };
  },
  methods: {
    openImageInput() {
      this.$refs.imageInput.click();
    },
    applyFilter() {
      // 这里添加您的滤镜逻辑
    },
  },
};
</script>

npm install caman

<script>
import Vue2ImageInput from "vue2-image-input";
import Caman from "caman";
export default {
  components: {
    Vue2ImageInput,
  },
  data() {
    return {
      selectedImage: null,
      filteredImage: null,
    };
  },
  methods: {
    openImageInput() {
      this.$refs.imageInput.click();
    },
    applyFilter() {
      if (this.selectedImage) {
        // 使用CamanJS处理图像
        const image = new Image();
        image.src = this.selectedImage;
        image.onload = () => {
          Caman(image, function () {
            // 在这里添加滤镜效果
            this.brightness(10).render(); // 例如，增加亮度
          });
          this.filteredImage = image.toDataURL();
        };
      }
    },
  },
};
</script>

npm run serve