图片优化 测试

hangtag-ui/hangtag-ui-admin/build/vite/index.ts

@@ -84,7 +84,7 @@ export function createVitePlugins() {
     viteCompression({
       verbose: true, // 是否在控制台输出压缩结果
       disable: false, // 是否禁用
-      threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
+      threshold: 5120, // 体积大于 threshold 才会被压缩,单位 b
       algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
       ext: '.gz', // 生成的压缩包后缀
       deleteOriginFile: false //压缩后是否删除源文件

hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/DesignPropEdit.vue

@@ -198,7 +198,7 @@
     </div>
 
     <div
-      :class="{ 'hidden-div': true }">
+      :class="{ 'hidden-div': false }">
       <DraftDesign ref="draftDesignEditRef"/>
     </div>
   </div>
@@ -241,7 +241,7 @@ const that = reactive({
   draftDesignList: [],
   draftDesignId: '',
   reView: false,
-  currentZoom: 1,
+  currentZoom: 6,
   changeCount: 0,
   previewUrl: "",
   ingredientInfoList: [],
@@ -434,11 +434,10 @@ const loadConfig = (config: object, propData = {}) => {
   // true, conf.pageConfig, conf.data, test
   draftDesignEditRef.value.init(false, that.pageConfig, that.data, that.propInfo)
   queryUseLabel();
-  // 延时加载图片
+
   setTimeout(()=>{
-    that.currentZoom = 6;
-    loading.value = false
-  },800)
+    showPng();
+  },200)
 
 }
 const queryUseLabel = (label) => {

hangtag-ui/hangtag-ui-admin/src/components/DraftDesign/components/node/ShapeImageNode.vue

@@ -14,7 +14,7 @@
       :style="svgStyle"
     >
       <image
-        :href="hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
+        :href="this.cellInfo.style.shape.hrefBase64 || cellInfo.style.shape.href" x="0" y="0"
         style="width: 100%;height: 100%;"
         :stroke="cellInfo.style.shape.strokeColor"
         :stroke-width="cellInfo.style.shape.strokeWidth"
@@ -110,6 +110,7 @@ export default defineComponent({
             fillColor: '#000000', // 填充颜色
             fillOpacity: '', // 填充颜色的不透明度
             href: '',
+            hrefBase64: null,
             opacity: '', // 元素的不透明度
             strokeDashoffset: '', // 虚线起始偏移量
             strokeLinecap: undefined, // 线段末端的样式："round" | "butt" | "square" | "inherit" | undefined
@@ -255,10 +256,12 @@ export default defineComponent({
           text: {}
         }
       }, info)
+
       if(this.cellInfo.style.shape.href){
         convertImageToBase64(this.cellInfo.style.shape.href).then((res)=>{
           // @ts-ignore
-          this.hrefBase64 = res
+          // this.hrefBase64 = res
+          this.cellInfo.style.shape.href = res
         })
       }
       setTimeout(() => {