feat: tui-image-editor 使用内存泄漏问题

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

@@ -224,6 +224,10 @@ const initTuiImageEditor = () => {
     imageEditor.value.ui.text._els.textColorpicker.colorElement.style.backgroundColor = defaultColor;
     // 更改默认文本，在源代码中tui-image-editor.js的 addText方法 50592行
 
+    // 设置文本字体大小范围
+    imageEditor.value.ui.text._els.textRange.min = 20;
+    imageEditor.value.ui.text._els.textRange.max = 200;
+
     // window.onresize = function () {
     //     imageEditor.value.ui.resizeEditor();
     // };
@@ -244,6 +248,9 @@ const initTuiImageEditor = () => {
     //     console.log(imageEditor.value);
     // });
     loading.value = false;
+
+    // 针对图片加载首次不显示，必须手动调用一次refreshImageShow方法(个人项目未复现，公司项目有该问题，考虑是返回的图片的加载方式问题或者格式等问题)
+    // refreshImageShowWithDelay(300, true);
 };
 
 const addEventListenerFN = () => {
@@ -348,17 +355,65 @@ const changeImage = (type) => {
         });
 };
 
+// 图片加载没问题调用此方法
 const refreshImageShow = () => {
     scale.value = 1;
+    const { width, height } = imageEditor.value.getCanvasSize();
+    let maxSize = Math.max(width, height);
+    // 图片大小如果获取到为0，则代表图片还未加载完毕
+    if (!maxSize) {
+        return;
+    }
+    // 动态设置文本字体大小，不然在不同分辨率下字体大小会差异很大
+    imageEditor.value.ui.text._els.textRange.value = 20 + Math.ceil(maxSize / 500) * 20;
+    /**
+     * 这里有两个作用
+     * 1. 如果图片有放大缩小，在切换图片时还原比例
+     * 2. 解决公司项目图片加载后不显示，必须手动调用一次更改尺寸方法
+     */
     imageEditor.value.resizeCanvasDimension({
         width: imgSize.width,
         height: imgSize.height,
     });
 };
 
+// 图片加载有问题调用此方法
+const refreshImageShowWithDelay = (delay = 300, closeLoading) => {
+    scale.value = 1;
+
+    setTimeout(() => {
+        const { width, height } = imageEditor.value.getCanvasSize();
+        let maxSize = Math.max(width, height);
+        // 图片大小如果获取到为0，则代表图片还未加载完毕
+        if (!maxSize) {
+            // 如果图片还未加载完毕，则继续递归延时刷新
+            refreshImageShowWithDelay(1000, closeLoading);
+            return;
+        }
+        if (closeLoading) {
+            loading.value = false;
+        }
+
+        // 动态设置文本字体大小，不然在不同分辨率下字体大小会差异很大
+        imageEditor.value.ui.text._els.textRange.value = 20 + Math.ceil(maxSize / 500) * 20;
+        /**
+         * 这里有两个作用
+         * 1. 如果图片有放大缩小，在切换图片时还原比例
+         * 2. 解决公司项目图片加载后不显示，必须手动调用一次更改尺寸方法
+         */
+        imageEditor.value.resizeCanvasDimension({
+            width: imgSize.width,
+            height: imgSize.height,
+        });
+    }, delay);
+};
+
 const closeEditor = () => {
     document.querySelector('.tui-image-editor-wrap').removeEventListener('click', handleClickOutside);
+    const canvas = imageEditor.value._graphics._canvas;
     imageEditor.value.destroy();
+    // 重点，这里如果不销毁canvas，会导致内存泄漏，每次都增加100-200M内存
+    canvas.dispose();
     imageEditor.value = null;
     emits('close');
 };