Merge branch 'dev_1.1.2' of http://git.qmth.com.cn/marking-cet/marking-cet-web into dev_1.1.2

src/assets/styles/element/custom.scss

@@ -364,4 +364,7 @@ body {
       display:flex;
     }
   }
+}
+.mark-container .mark-content .mark-content-paper img{
+  max-width: none !important;
 }

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/modules/marking/mark/index.vue

@@ -168,7 +168,6 @@ import ReMarkingStatus from '@/assets/images/status-remarking.png'
 import SampleAStatus from '@/assets/images/status-sample-a.png'
 import SampleBStatus from '@/assets/images/status-sample-b.png'
 import RemarkBox from './remark-box.vue'
-import { usePreloadImageToTask } from '@/utils/usePreloadImageToTask'
 import { preloadImg } from '@/utils/common'
 import type { SetImgBgOption } from '@/hooks/useSetImgBg'
 import type { ExtractApiResponse } from '@/api/api'
@@ -675,9 +674,6 @@ const imgLoaded = () => {
 const handleTaskPool = () => {
   currentTaskPool.forEach((task: any) => {
     preloadImg(task?.url)
-    // if (!task.dataUrl) {
-    //   usePreloadImageToTask(imgOption, frontColor, setFrontColor, task)
-    // }
   })
 }
 </script>

src/modules/marking/mark/remark-box.vue

@@ -51,7 +51,6 @@ import useFetch from '@/hooks/useFetch'
 import useVModel from '@/hooks/useVModel'
 import BaseTable from '@/components/element/BaseTable.vue'
 import { throttle } from 'lodash-es'
-import { usePreloadImageToTask } from '@/utils/usePreloadImageToTask'
 import { preloadImg } from '@/utils/common'
 import useMarkHeader from '@/hooks/useMarkHeader'
 const props = defineProps<{ imgOption: any }>()
@@ -67,9 +66,6 @@ const getMarkHistory = async () => {
   let res = await useFetch('getMarkHistory').fetch()
   markHistoryList.value = res.markHistoryList
   markHistoryList.value.forEach((task: any) => {
-    // if (!task.dataUrl) {
-    //   usePreloadImageToTask(imgOptionCom, frontColor, setFrontColor, task)
-    // }
     preloadImg(task?.url)
   })
   nextTick(() => {

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)

src/utils/usePreloadImageToTask.ts

@@ -1,206 +0,0 @@
-import { ref, onScopeDispose, watch, nextTick, unref, computed, watchEffect } from 'vue'
-import type { Ref } from 'vue'
-import { isDom } from '@/utils/common'
-import TintImageWorker from '@/utils/image.worker?worker'
-import useMainStore from '@/store/main'
-import { useRoute } from 'vue-router'
-import analyze from 'rgbaster'
-export type RGBA = number[]
-
-export type Point = [number, number]
-export interface SetImgBgOption {
-  image?: string | HTMLImageElement | null
-  basePoint?: Point[]
-  distance?: number
-  enableSharpen?: boolean
-  rotate?: number
-  scale?: number
-}
-
-interface InitOption {
-  frontColor?: Ref<string>
-  setFrontColor?: any
-}
-
-function getRgba(canvas: any, that: any) {
-  const imgWidth = that.width
-  const imgHeight = that.height
-
-  canvas.width = imgWidth
-  canvas.height = imgHeight
-
-  const context = canvas.getContext('2d')
-
-  context.drawImage(that, 0, 0, imgWidth, imgHeight)
-  const imgdatas = context.getImageData(0, 0, imgWidth, imgHeight)
-  const imgdata = imgdatas.data
-  const newJson: any = {}
-  const length = imgdata.length
-  console.log('length:' + length)
-  for (let i = 0; i < 250; i++) {
-    if (i % 4 === 0) {
-      const alpha = Math.round((imgdata[i + 3] / 255) * 100) / 100
-      const rgba = imgdata[i] + ',' + imgdata[i + 1] + ',' + imgdata[i + 2] + ',' + alpha
-      if (!newJson[rgba]) {
-        newJson[rgba] = 1
-      } else {
-        newJson[rgba]++
-      }
-    }
-  }
-  let maxNum = 0
-  let maxVal = ''
-  for (const key in newJson) {
-    if (newJson[key] > maxNum) {
-      maxNum = newJson[key]
-      maxVal = key
-    }
-  }
-  console.log('rgba:', maxVal + ';次数:' + maxNum)
-  return maxVal
-}
-function getHex(...value: any) {
-  const r = value[0].toString(16)
-  const g = value[1].toString(16)
-  const b = value[2].toString(16)
-  let hex = r + g + b
-  if (r.slice(0, 1) == r.slice(1, 1) && g.slice(0, 1) == g.slice(1, 1) && b.slice(0, 1) == b.slice(1, 1)) {
-    hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1)
-  }
-  return hex
-}
-
-interface MessageData {
-  drawing: boolean
-  blob?: Blob
-}
-
-export const usePreloadImageToTask = (
-  option: Ref<SetImgBgOption>,
-  frontColor?: Ref<string>,
-  setFrontColor?: any,
-  task?: any
-) => {
-  const initImage = async ({ task, frontColor, setFrontColor }: any) => {
-    if (!task.url) {
-      return console.warn(`task缺少url属性：`, task)
-    }
-
-    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-      const img = new Image()
-      img.src = task.url as string
-      img.onload = async () => {
-        if (frontColor && setFrontColor) {
-          try {
-            const result = await analyze(task.url, { scale: 0.2 })
-            const bgColorRgb = result[0].color
-            const bgColorNum = bgColorRgb.split('rgb(')[1].slice(0, -1)
-            const splitArr = bgColorNum.split(',')
-            const hex = getHex(Number(splitArr[0]), Number(splitArr[1]), Number(splitArr[2]))
-            const { fullPath } = useRoute()
-            const mainStore = useMainStore()
-            const userSetColor = mainStore.userMarkConfig?.[fullPath]?.frontColor
-            if (!userSetColor) {
-              setFrontColor('#' + hex)
-            }
-          } catch {}
-        }
-
-        resolve(img)
-      }
-      img.onerror = () => {
-        console.log('img error')
-        reject()
-      }
-      img.onabort = () => {
-        console.log('img aborted')
-        reject()
-      }
-    })
-    return image
-  }
-
-  const imageWorker = new TintImageWorker()
-  const drawing = ref<boolean>(false)
-  const dataUrl = ref('')
-  imageWorker.addEventListener('message', (e) => {
-    const data = e.data as MessageData
-    drawing.value = data.drawing
-    dataUrl.value = data.blob ? URL.createObjectURL(data.blob) : ''
-    task.dataUrl = dataUrl.value
-  })
-
-  nextTick(() => {
-    const opt = unref(option)
-    // if (!opt.image) {
-    //   drawing.value = false
-    //   dataUrl.value = ''
-    //   return
-    // }
-    initImage({ task, frontColor, setFrontColor })
-      .then((image) => {
-        if (!image) return
-        createImageBitmap(image).then((imageBitMap) => {
-          imageWorker.postMessage(
-            {
-              type: 'init',
-              imageBitMap,
-              basePoint: opt.basePoint,
-              enableSharpen: opt.enableSharpen,
-              distance: opt.distance,
-              scale: opt.scale,
-              rotate: opt.rotate,
-            },
-            [imageBitMap]
-          )
-        })
-      })
-      .catch((err: any) => {
-        drawing.value = false
-        dataUrl.value = ''
-        console.log('initImage catch err')
-      })
-  })
-
-  watch(
-    () => option.value.scale,
-    () => {
-      imageWorker.postMessage({ type: 'scale', scale: option.value?.scale })
-    }
-  )
-
-  watch(
-    () => option.value.rotate,
-    () => {
-      imageWorker.postMessage({ type: 'rotate', rotate: option.value?.rotate })
-    }
-  )
-
-  watch(dataUrl, (current, prev) => {
-    const imgWrapDom = document.querySelector('.img-wrap')
-    if (imgWrapDom) {
-      setTimeout(() => {
-        imgWrapDom.scrollTop = 0
-      }, 10)
-    }
-    if (prev) {
-      try {
-        URL.revokeObjectURL(prev)
-      } catch (error) {}
-    }
-  })
-
-  onScopeDispose(() => {
-    if (dataUrl.value) {
-      try {
-        URL.revokeObjectURL(dataUrl.value)
-      } catch (error) {}
-    }
-    imageWorker.terminate()
-  })
-
-  return {
-    drawing,
-    dataUrl,
-  }
-}