diff --git a/src/views/demo/tuiImageEditor/components/image-editor.vue b/src/views/demo/tuiImageEditor/components/image-editor.vue index 780bbd3..82f8acc 100644 --- a/src/views/demo/tuiImageEditor/components/image-editor.vue +++ b/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'); };