xiaoshu/src/components/image-editor/TuiImageEditorVue3.vue

<template>
  <div ref="editor"></div>
</template>
<script setup>
import {useTemplateRef, onMounted, onUnmounted} from 'vue'
import ImageEditor from 'tui-image-editor';
import 'tui-color-picker/dist/tui-color-picker.css';
import 'tui-image-editor/dist/tui-image-editor.css';

const props = defineProps({
  // includeUi: {
  //   type: Boolean,
  //   default: true,
  // },
  // /**
  //  * @see https://nhn.github.io/tui.image-editor/latest/ImageEditor
  //  */
  // options: {
  //   type: Object,
  //   default() {
  //     return {
  //       cssMaxWidth: 700,
  //       cssMaxHeight: 900,
  //     };
  //   },
  // },
  // 图片地址
  image_url: String,
});

const includeUIOptions = {
  includeUI: {
    initMenu: 'filter',
  },
};

const editor = useTemplateRef('editor');

// 编辑器实例
let editorInstance = null;

const addEventListener = () =>  {
  // Object.keys(this.$listeners).forEach((eventName) => {
  //   editorInstance.on(eventName, (...args) => this.$emit(eventName, ...args));
  // });
}

const getRootElement = () => {
  return editor.value;
}

const invoke = (methodName, ...args) => {
  let result = null;
  if (editorInstance[methodName]) {
    result = editorInstance[methodName](...args);
  } else if (methodName.indexOf('.') > -1) {
    const func = getMethod(editorInstance, methodName);

    if (typeof func === 'function') {
      result = func(...args);
    }
  }

  return result;
}

const getMethod = (instance, methodName) => {
  const { first, rest } = parseDotMethodName(methodName);
  const isInstance = instance.constructor.name !== 'Object';
  const type = typeof instance[first];
  let obj;

  if (isInstance && type === 'function') {
    obj = instance[first].bind(instance);
  } else {
    obj = instance[first];
  }

  if (rest.length > 0) {
    return getMethod(obj, rest);
  }

  return obj;
}

const parseDotMethodName = (methodName) => {
  const firstDotIdx = methodName.indexOf('.');
  let firstMethodName = methodName;
  let restMethodName = '';

  if (firstDotIdx > -1) {
    firstMethodName = methodName.substring(0, firstDotIdx);
    restMethodName = methodName.substring(firstDotIdx + 1, methodName.length);
  }

  return {
    first: firstMethodName,
    rest: restMethodName,
  };
}

const zh_local = {
  Crop: "裁剪",
  Load: '替换图片',
  DeleteAll: "全部删除",
  Delete: "删除",
  Undo: "撤销",
  Redo: "反撤销",
  Reset: "重置",
  Flip: "镜像",
  Rotate: "旋转",
  Draw: "画",
  Shape: "形状标注",
  Icon: "图标标注",
  Text: "文字标注",
  Mask: "遮罩",
  Filter: "滤镜",
  Bold: "加粗",
  Italic: "斜体",
  Underline: "下划线",
  Left: "左对齐",
  Center: "居中",
  Right: "右对齐",
  Color: "颜色",
  "Text size": "字体大小",
  Custom: "自定义",
  Square: "正方形",
  Apply: "应用",
  Cancel: "取消",
  "Flip X": "X 轴",
  "Flip Y": "Y 轴",
  Range: "区间",
  Stroke: "描边",
  Fill: "填充",
  Circle: "圆",
  Triangle: "三角",
  Rectangle: "矩形",
  Free: "曲线",
  Straight: "直线",
  Arrow: "箭头",
  "Arrow-2": "箭头2",
  "Arrow-3": "箭头3",
  "Star-1": "星星1",
  "Star-2": "星星2",
  Polygon: "多边形",
  Location: "定位",
  Heart: "心形",
  Bubble: "气泡",
  "Custom icon": "自定义图标",
  "Load Mask Image": "加载蒙层图片",
  Grayscale: "灰度",
  Blur: "模糊",
  Sharpen: "锐化",
  Emboss: "浮雕",
  "Remove White": "除去白色",
  Distance: "距离",
  Brightness: "亮度",
  Noise: "噪音",
  "Color Filter": "彩色滤镜",
  Sepia: "棕色",
  Sepia2: "棕色2",
  Invert: "负片",
  Pixelate: "像素化",
  Threshold: "阈值",
  Tint: "色调",
  Multiply: "正片叠底",
  Blend: "混合色",
  Double: '双击',
  Download: '下载图片'
};

const theme = {
  // // image 坐上角度图片
  // 'common.bi.image': '', // 在这里换上你喜欢的logo图片
  // 'common.bisize.width': '0px',
  // 'common.bisize.height': '0px',
  // 'common.backgroundImage': 'none',
  // 'common.backgroundColor': '#f3f4f6',
  // 'common.border': '1px solid #444',

  // // header
  // 'header.backgroundImage': 'none',
  // 'header.backgroundColor': '#f3f4f6',
  // 'header.border': '0px',

  // // load button
  // 'loadButton.backgroundColor': '#fff',
  // 'loadButton.border': '1px solid #ddd',
  // 'loadButton.color': '#222',
  // 'loadButton.fontFamily': 'NotoSans, sans-serif',
  // 'loadButton.fontSize': '12px',
  // 'loadButton.display': 'none', // 可以直接隐藏掉

  // // download button
  // 'downloadButton.backgroundColor': '#fdba3b',
  // 'downloadButton.border': '1px solid #fdba3b',
  // 'downloadButton.color': '#fff',
  // 'downloadButton.fontFamily': 'NotoSans, sans-serif',
  // 'downloadButton.fontSize': '12px',
  // 'downloadButton.display': 'none', // 可以直接隐藏掉

  // // icons default
  // 'menu.normalIcon.color': '#8a8a8a',
  // 'menu.activeIcon.color': '#555555',
  // 'menu.disabledIcon.color': '#434343',
  // 'menu.hoverIcon.color': '#e9e9e9',
  // 'submenu.normalIcon.color': '#8a8a8a',
  // 'submenu.activeIcon.color': '#e9e9e9',

  // 'menu.iconSize.width': '24px',
  // 'menu.iconSize.height': '24px',
  // 'submenu.iconSize.width': '32px',
  // 'submenu.iconSize.height': '32px',

  // // submenu primary color
  // 'submenu.backgroundColor': '#1e1e1e',
  // 'submenu.partition.color': '#858585',

  // // submenu labels
  // 'submenu.normalLabel.color': '#858585',
  // 'submenu.normalLabel.fontWeight': 'lighter',
  // 'submenu.activeLabel.color': '#fff',
  // 'submenu.activeLabel.fontWeight': 'lighter',

  // // checkbox style
  // 'checkbox.border': '1px solid #ccc',
  // 'checkbox.backgroundColor': '#fff',

  // // rango style
  // 'range.pointer.color': '#fff',
  // 'range.bar.color': '#666',
  // 'range.subbar.color': '#d1d1d1',

  // 'range.disabledPointer.color': '#414141',
  // 'range.disabledBar.color': '#282828',
  // 'range.disabledSubbar.color': '#414141',

  // 'range.value.color': '#fff',
  // 'range.value.fontWeight': 'lighter',
  // 'range.value.fontSize': '11px',
  // 'range.value.border': '1px solid #353535',
  // 'range.value.backgroundColor': '#151515',
  // 'range.title.color': '#fff',
  // 'range.title.fontWeight': 'lighter',

  // // colorpicker style
  // 'colorpicker.button.border': '1px solid #1e1e1e',
  // 'colorpicker.title.color': '#fff',



// -----------------------

  // // image 坐上角度图片
  //   "common.bi.image": "", // 在这里换上你喜欢的logo图片
  //   "common.bisize.width": "0px",
  //   "common.bisize.height": "0px",
  //   "common.backgroundImage": "none",
  //   "common.backgroundColor": "#f3f4f6",
  //   "common.border": "1px solid #444",

  //   // header
  //   "header.backgroundImage": "none",
  //   "header.backgroundColor": "#f3f4f6",
  //   "header.border": "0px",
  //   "header.margin": "0px auto",

  //   // load button
  //   "loadButton.backgroundColor": "#fff",
  //   "loadButton.border": "1px solid #ddd",
  //   "loadButton.color": "#222",
  //   "loadButton.fontFamily": "NotoSans, sans-serif",
  //   "loadButton.fontSize": "12px",
  //   // "loadButton.width": "150px",
  //   // "loadButton.display": "none", // 可以直接隐藏掉

  //   // download button
  //   "downloadButton.backgroundColor": "#fdba3b",
  //   "downloadButton.border": "1px solid #fdba3b",
  //   "downloadButton.color": "#fff",
  //   "downloadButton.fontFamily": "NotoSans, sans-serif",
  //   "downloadButton.fontSize": "12px",
  //   // "downloadButton.display": "none", // 可以直接隐藏掉

  //   // icons default
  //   "menu.normalIcon.color": "#8a8a8a",
  //   "menu.activeIcon.color": "#555555",
  //   "menu.disabledIcon.color": "#434343",
  //   "menu.hoverIcon.color": "#e9e9e9",
  //   "submenu.normalIcon.color": "#8a8a8a",
  //   "submenu.activeIcon.color": "#e9e9e9",

  //   "menu.iconSize.width": "24px",
  //   "menu.iconSize.height": "24px",
  //   "submenu.iconSize.width": "32px",
  //   "submenu.iconSize.height": "32px",

  //   // submenu primary color
  //   "submenu.backgroundColor": "#1e1e1e",
  //   "submenu.partition.color": "#858585",

  //   // submenu labels
  //   "submenu.normalLabel.color": "#858585",
  //   "submenu.normalLabel.fontWeight": "lighter",
  //   "submenu.activeLabel.color": "#fff",
  //   "submenu.activeLabel.fontWeight": "lighter",

  //   // checkbox style
  //   "checkbox.border": "1px solid #ccc",
  //   "checkbox.backgroundColor": "#fff",

  //   // rango style
  //   "range.pointer.color": "#fff",
  //   "range.bar.color": "#666",
  //   "range.subbar.color": "#d1d1d1",

  //   "range.disabledPointer.color": "#414141",
  //   "range.disabledBar.color": "#282828",
  //   "range.disabledSubbar.color": "#414141",

  //   "range.value.color": "#fff",
  //   "range.value.fontWeight": "lighter",
  //   "range.value.fontSize": "11px",
  //   "range.value.border": "1px solid #353535",
  //   "range.value.backgroundColor": "#151515",
  //   "range.title.color": "#fff",
  //   "range.title.fontWeight": "lighter",

  //   // colorpicker style
  //   "colorpicker.button.border": "1px solid #1e1e1e",
  //   "colorpicker.title.color": "#fff",


// -----------------------

    "common.bi.image": "", // 左上角logo图片
  "common.bisize.width": "0px",
  "common.bisize.height": "0px",
  "common.backgroundImage": "none",
  "common.backgroundColor": "#f3f4f6",
  "common.border": "1px solid #333",

  // header
  "header.backgroundImage": "none",
  "header.backgroundColor": "#f3f4f6",
  "header.border": "0px",
  
  // load button
  "loadButton.backgroundColor": "#fff",
  "loadButton.border": "1px solid #ddd",
  "loadButton.color": "#222",
  "loadButton.fontFamily": "NotoSans, sans-serif",
  "loadButton.fontSize": "12px",
  // "loadButton.display": "none", // 隐藏

  // download button
  "downloadButton.backgroundColor": "#fdba3b",
  "downloadButton.border": "1px solid #fdba3b",
  "downloadButton.color": "#fff",
  "downloadButton.fontFamily": "NotoSans, sans-serif",
  "downloadButton.fontSize": "12px",
  // "downloadButton.display": "none", // 隐藏

  // icons default
  "menu.normalIcon.color": "#8a8a8a",
  "menu.activeIcon.color": "#555555",
  "menu.disabledIcon.color": "#ccc",
  "menu.hoverIcon.color": "#e9e9e9",
  "submenu.normalIcon.color": "#8a8a8a",
  "submenu.activeIcon.color": "#e9e9e9",

  "menu.iconSize.width": "24px",
  "menu.iconSize.height": "24px",
  "submenu.iconSize.width": "32px",
  "submenu.iconSize.height": "32px",

  // submenu primary color
  "submenu.backgroundColor": "#1e1e1e",
  "submenu.partition.color": "#858585",

  // submenu labels
  "submenu.normalLabel.color": "#858585",
  "submenu.normalLabel.fontWeight": "lighter",
  "submenu.activeLabel.color": "#fff",
  "submenu.activeLabel.fontWeight": "lighter",

  // checkbox style
  "checkbox.border": "1px solid #ccc",
  "checkbox.backgroundColor": "#fff",

  // rango style
  "range.pointer.color": "#fff",
  "range.bar.color": "#666",
  "range.subbar.color": "#d1d1d1",

  "range.disabledPointer.color": "#414141",
  "range.disabledBar.color": "#282828",
  "range.disabledSubbar.color": "#414141",

  "range.value.color": "#fff",
  "range.value.fontWeight": "lighter",
  "range.value.fontSize": "11px",
  "range.value.border": "1px solid #353535",
  "range.value.backgroundColor": "#151515",
  "range.title.color": "#fff",
  "range.title.fontWeight": "lighter",

  // colorpicker style
  "colorpicker.button.border": "1px solid #1e1e1e",
  "colorpicker.title.color": "#fff",
};

onMounted(() => {
    // let options = props.options;

    // if (props.includeUi) {
    //   options = Object.assign(includeUIOptions, props.options);
    // }

    // options.includeUI.locale = zh_local;
    // options.includeUI.theme = theme;

    const opts = {
      includeUI: {
        loadImage: {
          // path: "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1d7a1feb60346449c1a64893888989a~tplv-k3u1fbpfcp-watermark.image",
          // path: 'http://localhost/src/assets/slider/logo.jpg',
          path: props.image_url,
          name: "image",
        },
        initMenu: "draw", // 默认打开的菜单项
        menuBarPosition: "bottom", // 菜单所在的位置
        locale: zh_local, // 本地化语言为中文
        theme: theme
      },
      cssMaxWidth: 1000, // canvas 最大宽度
      cssMaxHeight: 600, // canvas 最大高度
    }

    editorInstance = new ImageEditor(editor.value, opts);
    addEventListener();
});

onUnmounted(() => {
  // Object.keys(this.$listeners).forEach((eventName) => {
  //   editorInstance.off(eventName);
  // });

  editorInstance.destroy();
  editorInstance = null;
});
</script>

<style>
.image-editor-body .tui-image-editor{
  top: 0 !important;
}
</style>