图片放大后切换任务时图片会闪烁的问题优化

server.config.ts

@@ -3,11 +3,11 @@ import type { ServerOptions } from 'vite'
 const server: ServerOptions = {
   proxy: {
     '^/?(api|file)/': {
-      target: 'http://192.168.10.41:8200',
+      // target: 'http://192.168.10.41:8200',
       // target: 'http://192.168.10.178:8200',
       // target: 'http://192.168.10.108:8200',
       // target: 'http://cet-test.markingtool.cn',
-      // target: 'http://192.168.10.136:80',
+      target: 'http://192.168.10.136:80',
       // target: 'http://cet-dev.markingtool.cn:8200',
     },
   },

src/hooks/useSetImgBg.ts

@@ -194,9 +194,12 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
   const imgLoading = ref(false)
   imageWorker.addEventListener('message', (e) => {
     const data = e.data as MessageData
-    drawing.value = data.drawing
-    dataUrl.value = data.blob ? URL.createObjectURL(data.blob) : ''
-    imgLoading.value = false
+    console.log('data.drawing', data.drawing)
+    if (!data.drawing) {
+      drawing.value = data.drawing
+      dataUrl.value = data.blob ? URL.createObjectURL(data.blob) : ''
+      imgLoading.value = false
+    }
   })
 
   watch(
@@ -216,6 +219,7 @@ export const useSetImgBg = (option: Ref<SetImgBgOption>, frontColor?: Ref<string
           return
         }
         initImage({ image: opt.image, frontColor, setFrontColor }).then((image) => {
+          console.log('opt', opt)
           if (!image) return
           createImageBitmap(image).then((imageBitMap) => {
             imageWorker.postMessage(

src/utils/image.worker.ts

@@ -210,7 +210,7 @@ class ImageWorkerController {
   }
 
   /** 锐化/移除背景色 */
-  async tintImage({ sharpen, tint }: { sharpen?: boolean; tint?: boolean }) {
+  async tintImage({ sharpen, tint }: { sharpen?: boolean; tint?: boolean }, updateView: boolean) {
     if (!sharpen && !tint) {
       return
     }
@@ -231,7 +231,9 @@ class ImageWorkerController {
     })
     this.#context?.putImageData(this.#imageData, 0, 0)
     this.#imageBitMap = this.canvas.transferToImageBitmap()
-    this.imageToCanvas(1)
+    if (updateView) {
+      this.imageToCanvas(1)
+    }
   }
 
   /** 缩放 */
@@ -293,7 +295,7 @@ class ImageWorkerController {
     this.drawing = false
   }
 
-  async imageToCanvas(scale = 1, imageBitMap: ImageBitmap | null = this.#imageBitMap) {
+  async imageToCanvas(scale = 1, updateView = true, imageBitMap: ImageBitmap | null = this.#imageBitMap) {
     if (!imageBitMap) {
       return
     }
@@ -305,13 +307,15 @@ class ImageWorkerController {
     this.#context?.drawImage(imageBitMap, 0, 0, width, height)
     this.#imageData = this.#context?.getImageData(0, 0, width, height) || null
     this.#blob = await this.canvas.convertToBlob()
-    this.drawing = false
+    if (updateView) {
+      this.drawing = false
+    }
   }
 
-  async imageDataUpdate() {
+  async imageDataUpdate(updateView: boolean) {
     if (this.#imageData && this.canvas) {
       this.#mainColor = this.getMainColorWithPointes({ width: this.canvas.width, height: this.canvas.height })
-      await this.tintImage({ sharpen: this.#enableSharpen, tint: true })
+      await this.tintImage({ sharpen: this.#enableSharpen, tint: true }, updateView)
     }
   }
 
@@ -324,8 +328,8 @@ class ImageWorkerController {
     this.#distance = option.distance ?? DISTANCE
     this.#scale = option.scale ?? 1
     this.#rotate = option.rotate ?? 0
-    await this.imageToCanvas(1)
-    await this.imageDataUpdate()
+    await this.imageToCanvas(1, false)
+    await this.imageDataUpdate(this.#scale == 1 && this.#rotate == 0)
     this.#initDone = true
     if (this.#scale !== 1) {
       this.scaleImage(this.#scale)