一、准备工作

在开始之前，请确保你已经安装了Node.js和Vue CLI。以下是在Vue项目中使用Toast UI Image Editor的步骤：

1. 安装Toast UI Image Editor

首先，通过npm或yarn将Toast UI Image Editor添加到你的项目中：

npm install @toast-ui/vue-image-editor

或者

yarn add @toast-ui/vue-image-editor

2. 引入并使用ImageEditor组件

在你的Vue组件中引入并注册ImageEditor组件：

<template>
  <div id="app">
    <TuiImageEditor ref="imageEditor" :options="editorOptions"></TuiImageEditor>
  </div>
</template>

3. 配置编辑器选项

在Vue组件的data函数中定义编辑器选项：

data() {
  return {
    editorOptions: {
      // ...其他选项
      // 添加滤镜选项
      css: `
        .tui-image-editor .tui-folder {
          background-color: #f5f5f5;
        }
        .tui-image-editor .tui-folder .tui-folder-name {
          color: #333;
        }
      `,
      // ...其他选项
    },
  };
},

二、实现照片滤镜效果

1. 应用滤镜

在ImageEditor组件中，你可以通过addFilter方法来添加滤镜：

methods: {
  applyFilter() {
    const imageEditor = this.$refs.imageEditor;
    imageEditor.addFilter('grayscale');
    // 你可以添加更多的滤镜，如：imageEditor.addFilter('vibrance', 0.5);
  },
},

2. 动态调整滤镜参数

Toast UI Image Editor允许你动态调整滤镜的参数。以下是一个调整亮度滤镜的例子：

methods: {
  adjustBrightness(brightness) {
    const imageEditor = this.$refs.imageEditor;
    imageEditor.addFilter('brightness', brightness);
  },
},

3. 预览和保存图片

methods: {
  saveImage() {
    const imageEditor = this.$refs.imageEditor;
    imageEditor.toDataURL().then((dataUrl) => {
      // 保存图片到服务器或本地
    });
  },
},

三、总结