js tui-image-editor 使用，图片编辑插件

效果查看地址

https://ui.toast.com/tui-image-editor

github地址

https://github.com/nhn/tui.image-editor

vue 项目安装方式

yarn add @toast-ui/image-editor

vue3 使用demo

<template>
  <div class="image-editor-container">
    <!-- TUI Image Editor 容器 -->
    <div ref="editorContainer" class="editor"></div>

    <!-- 操作按钮 -->
    <div class="controls">
      <button @click="loadImage">Load Image</button>
      <button @click="exportImage">Export Image</button>
      <button @click="resetEditor">Reset</button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import '@toast-ui/image-editor/dist/toastui-image-editor.min.css';
import { ImageEditor } from '@toast-ui/image-editor';

// 引用容器元素
const editorContainer = ref(null);
let imageEditorInstance = null;

// 初始化 TUI Image Editor
onMounted(() => {
  if (editorContainer.value) {
    imageEditorInstance = new ImageEditor(editorContainer.value, {
      includeUI: {
        loadImage: {
          path: 'https://placekitten.com/600/400', // 初始加载的图片路径
          name: 'Sample Image'
        },
        theme: 'white', // 主题颜色（可选：'black' 或 'white'）
        initMenu: 'filter', // 初始打开的菜单（例如：'filter', 'crop', 'draw' 等）
        menuBarPosition: 'top' // 菜单栏位置（可选：'top' 或 'bottom'）
      },
      cssMaxWidth: 700, // 编辑器的最大宽度
      cssMaxHeight: 500, // 编辑器的最大高度
      usageStatistics: false // 是否启用使用统计（默认为 true）
    });

    // 监听图像加载完成事件
    imageEditorInstance.on('load.image.complete', () => {
      console.log('Image loaded successfully!');
    });

    // 监听图像导出完成事件
    imageEditorInstance.on('export.image.complete', (event) => {
      console.log('Image exported:', event.data);
    });
  }
});

// 卸载时销毁 TUI Image Editor 实例
onBeforeUnmount(() => {
  if (imageEditorInstance) {
    imageEditorInstance.destroy();
    imageEditorInstance = null;
  }
});

// 加载图像
const loadImage = () => {
  const imageUrl = prompt('Enter the URL of the image you want to load:');
  if (imageUrl) {
    imageEditorInstance.loadImageFromURL(imageUrl, 'User Image');
  }
};

// 导出图像
const exportImage = () => {
  const exportedImage = imageEditorInstance.exportImage('jpg', 0.9);
  const link = document.createElement('a');
  link.href = exportedImage;
  link.download = 'edited-image.jpg';
  link.click();
};

// 重置编辑器
const resetEditor = () => {
  imageEditorInstance.reset();
};
</script>

<style scoped>
.image-editor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.editor {
  width: 100%;
  max-width: 700px;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>