feat: tui-image-editor 使用

src/views/demo/tuiImageEditor/components/image-editor.vue

@@ -1,17 +1,32 @@
 <template>
     <Teleport to="body">
-        <div class="tui-image-editor-wrap">
+        <div
+            class="tui-image-editor-wrap"
+            v-loading="loading"
+        >
             <div id="tui-image-editor"></div>
+            <el-button
+                circle
+                :icon="Close"
+                class="close-btn"
+                @click="closeEditor"
+            ></el-button>
         </div>
     </Teleport>
 </template>
 
 <script setup>
-const { VITE_PUBLIC_PATH } = import.meta.env;
 import '../css/tui-color-picker.css';
 import '../css/tui-image-editor.css';
+import { ref, onMounted, watch } from 'vue';
+import { Close } from '@element-plus/icons-vue';
 
-import { ref, onMounted } from 'vue';
+const emits = defineEmits(['close']);
+const props = defineProps(['imgList']);
+const currentIndex = ref(0);
+const imageEditor = ref(null);
+const loading = ref(false);
+const scale = ref(1);
 
 function createScriptElement(src) {
     return new Promise((resolve, reject) => {
@@ -25,6 +40,7 @@ function createScriptElement(src) {
 }
 
 onMounted(async () => {
+    loading.value = true;
     // 加载同级目录下的js文件
     await createScriptElement('/src/views/demo/tuiImageEditor/js/fabric.js');
     await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-code-snippet.js');
@@ -36,25 +52,154 @@ onMounted(async () => {
     initTuiImageEditor();
 });
 
+const locale_zh = {
+    Resize: '调整宽高',
+    Crop: '裁剪',
+    Flip: '镜像',
+    Rotate: '旋转',
+    Draw: '画笔',
+    Shape: '形状标注',
+    Icon: '图标标注',
+    Text: '文字标注',
+    Mask: '遮罩',
+    Filter: '滤镜',
+
+    Download: '下 载',
+    Load: '上 传',
+
+    Free: '任意线条',
+    Straight: '直线',
+    Color: '颜色',
+    Range: '粗细',
+
+    ZoomIn: '放大',
+    ZoomOut: '缩小',
+    Hand: '手掌',
+    History: '历史',
+    Undo: '撤销',
+    Redo: '反撤销',
+    Reset: '重置',
+    Delete: '删除',
+    DeleteAll: '全部删除',
+
+    Bold: '加粗',
+    Italic: '斜体',
+    Underline: '下划线',
+    Left: '左对齐',
+    Center: '居中',
+    Right: '右对齐',
+    'Text size': '字体大小',
+    Custom: '自定义',
+    Square: '正方形',
+    Apply: '应用',
+    Cancel: '取消',
+    'Flip X': 'X 轴',
+    'Flip Y': 'Y 轴',
+    Stroke: '描边',
+    Fill: '填充',
+    Circle: '圆',
+    Triangle: '三角',
+    Rectangle: '矩形',
+    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: '混合色',
+};
+
+const theme = {
+    'common.bi.image': '',
+    'common.bisize.width': '0px',
+    'common.bisize.height': '0px',
+
+    'loadButton.display': 'none',
+    'downloadButton.display': 'none',
+
+    // // 菜单-普通状态 - 绿色
+    // 'menu.normalIcon.color': '#2d8cf0',
+    // // 菜单-选中状态 - 蓝色
+    // 'menu.activeIcon.color': 'blue',
+    // // 菜单-禁用状态 - 灰色
+    // 'menu.disabledIcon.color': 'grey',
+    // // 菜单-鼠标悬浮状态 - 黄色
+    // 'menu.hoverIcon.color': 'yellow',
+};
+
 const initTuiImageEditor = () => {
     // Image editor
-    var imageEditor = new tui.ImageEditor('#tui-image-editor', {
+    imageEditor.value = new tui.ImageEditor('#tui-image-editor', {
         includeUI: {
-            loadImage: {
+            loadImage: {},
-                path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
+            locale: locale_zh,
-                name: 'SampleImage',
+            theme: theme,
-            },
-            theme: {
-                'common.bi.image': '',
-            },
         },
         cssMaxWidth: 700,
         cssMaxHeight: 500,
         usageStatistics: false,
     });
+
+    imageEditor.value.loadImageFromURL(props.imgList[currentIndex.value].path, props.imgList[currentIndex.value].name).then((res) => {
+        console.log(res);
+
+        console.log(imageEditor.value);
+        imageEditor.value.ui._actions.main.zoomIn = () => {
+            console.log('zoomIn');
+            zoomSize('zoomIn');
+        };
+
+        imageEditor.value.ui._actions.main.zoomOut = () => {
+            console.log('zoomOut');
+            zoomSize('zoomOut');
+        };
+    });
+
     window.onresize = function () {
-        imageEditor.ui.resizeEditor();
+        imageEditor.value.ui.resizeEditor();
+    };
+    loading.value = false;
 };
+
+const zoomSize = (type) => {
+    console.log(type);
+    if (type === 'zoomIn') {
+        scale.value = scale.value + 0.1;
+    } else {
+        scale.value = scale.value - 0.1;
+    }
+    imageEditor.value.resizeCanvasDimension({
+        width: 750 * scale.value,
+        height: 500 * scale.value,
+    });
+};
+
+const closeEditor = () => {
+    imageEditor.value.destroy();
+    imageEditor.value = null;
+    window.fabric = null;
+    emits('close');
 };
 </script>
 
@@ -73,6 +218,13 @@ const initTuiImageEditor = () => {
         width: 800px !important;
         margin: 0 auto;
     }
+
+    .close-btn {
+        position: absolute;
+        top: 10px;
+        right: calc(50% - 400px + 18px);
+        z-index: 9;
+    }
 }
 </style>
 <style lang="scss">

src/views/demo/tuiImageEditor/index.vue

@@ -10,7 +10,7 @@
         <imageEditor
             v-if="showImageEditor"
             @close="showImageEditor = false"
-            :imgUrl="imgUrl"
+            :imgList="imgList"
         />
     </base-container>
 </template>
@@ -24,7 +24,17 @@ defineOptions({
 });
 
 const showImageEditor = ref(false);
-const imgUrl = ref('');
+const imgList = ref([
+    {
+        path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
+        name: '1',
+    },
+
+    {
+        path: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
+        name: '2',
+    },
+]);
 
 const openImageEditor = () => {
     showImageEditor.value = true;