feat: support image render mode in Image Compare

MegEngine · Aug 7, 2024 · 76a7e7b · 76a7e7b
1 parent 0fb4efd
commit 76a7e7b
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 18 deletions.
diff --git a/src/renderer/components/effect-preview/index.vue b/src/renderer/components/effect-preview/index.vue
@@ -1,6 +1,20 @@
 <template>
   <el-tooltip effect="light" placement="bottom">
     <div slot="content" class="image-style-container">
+      <el-divider>
+        <span class="title-style">{{ $t('imagePreview.mode.title') }}</span>
+      </el-divider>
+      <el-row :gutter="10" flex="cross:center">
+        <el-col :span="6">
+          <span class="text-style">{{ $t('imagePreview.mode.name') }}</span>
+        </el-col>
+        <el-col :span="18">
+          <div style="display: flex; justify-content: flex-end;">
+            <el-radio v-model="theMode" label="canvas" border>{{ $t('imagePreview.mode.canvas') }}</el-radio>
+            <el-radio v-model="theMode" label="image" border>{{ $t('imagePreview.mode.image') }}</el-radio>
+          </div>
+        </el-col>
+      </el-row>
       <el-divider>
         <span class="title-style">{{ $t('imagePreview.title') }}</span>
       </el-divider>
@@ -233,12 +247,19 @@ import VueSlider from 'vue-slider-component'
 import { debounce } from '@/utils'
 import { bus } from '@/utils/bus'
 import { histTypeOptions } from '@/components/hist-container/config'
+import { type } from 'os'
 
 export default {
   name: 'EffectPreview',
   components: {
     VueSlider
   },
+  props: {
+    mode: {
+      type: String,
+      default: 'canvas'
+    }
+  },
   data() {
     return {
       // 预览处理效果
@@ -316,6 +337,14 @@ export default {
           this.outputLevels = [this.outputLevels[0], val]
         }
       }
+    },
+    theMode: {
+      get() {
+        return this.mode
+      },
+      set(val) {
+        this.setMode(val)
+      }
     }
   },
   watch: {
@@ -356,10 +385,13 @@ export default {
         }
       },
       immediate: false
-    }
+    },
   },
   methods: {
     ...mapActions(['setPreference']),
+    setMode(newMode) {
+      this.$emit('set-mode', newMode)
+    },
     resetImageStyle() {
       // 预览处理效果
       this.brightness = 100

diff --git a/src/renderer/lang/en.js b/src/renderer/lang/en.js
@@ -150,7 +150,8 @@ export default {
       confirmUseNewLayout: 'Whether to use this layout immediately',
       confirmDialogTitle: 'Use New Layout',
       confirmUse: 'Use Now'
-    }
+    },
+    covered: 'covered'
   },
   imagePreview: {
     title: 'Color and Filters',
@@ -175,7 +176,13 @@ export default {
       histogramTip: 'use specified color channel'
     },
     reset: 'reset',
-    resetAll: 'reset all'
+    resetAll: 'reset all',
+    mode: {
+      title: 'Image Render Mode',
+      name: 'Render Mode',
+      canvas: 'canvas',
+      image: 'image'
+    }
   },
   imageCenter: {
     bilinearInterpolation: 'bilinar',

diff --git a/src/renderer/lang/ja.js b/src/renderer/lang/ja.js
@@ -146,7 +146,8 @@ export default {
       confirmUseNewLayout: 'このレイアウトを今すぐ使用しますか',
       confirmDialogTitle: '新しいレイアウトを使用する',
       confirmUse: 'すぐに使用する'
-    }
+    },
+    covered: '覆われた'
   },
   imagePreview: {
     title: '色とフィルター',
@@ -171,7 +172,13 @@ export default {
       histogramTip: '指定されたカラーチャネルを使用します'
     },
     reset: 'リセット',
-    resetAll: 'すべてリセット'
+    resetAll: 'すべてリセット',
+    mode: {
+      title: '画像レンダリングモード',
+      name: 'レンダリングモード',
+      canvas: 'canvas',
+      image: 'image'
+    }
   },
   imageCenter: {
     bilinearInterpolation: 'バイリニア補間',

diff --git a/src/renderer/lang/zh.js b/src/renderer/lang/zh.js
@@ -149,7 +149,8 @@ export default {
       confirmUseNewLayout: '是否立即使用该布局',
       confirmDialogTitle: '使用新布局',
       confirmUse: '立即使用'
-    }
+    },
+    covered: '覆盖图像'
   },
   imagePreview: {
     title: '色彩与滤镜',
@@ -174,7 +175,13 @@ export default {
       histogramTip: '使用指定颜色通道'
     },
     reset: '重置',
-    resetAll: '重置所有'
+    resetAll: '重置所有',
+    mode: {
+      title: '图像渲染模式',
+      name: '渲染模式',
+      canvas: 'canvas',
+      image: 'image'
+    }
   },
   imageCenter: {
     bilinearInterpolation: '双线性',

diff --git a/src/renderer/views/image/Content.vue b/src/renderer/views/image/Content.vue
@@ -151,6 +151,7 @@ export default {
     imageGroupList() {
       return this.imageList.length
         ? this.imageList.slice(this.groupStartIndex, this.groupStartIndex + this.groupCount)
+        // ? [this.imageList[0], this.imageList[0]]
         : []
     },
     containerStyle() {
@@ -438,6 +439,7 @@ export default {
       const canvasViews = this.$refs['image_canvas']
       let snapShotArr = []
       let coveredArr = []
+      // TODO: multi canvas to compare
       if ([GLOBAL_CONSTANTS.DIRECTION_LEFT, GLOBAL_CONSTANTS.DIRECTION_RIGHT].includes(direction)) {
         //左右对比,取整行进行比较
         if (columnLen === 3) {

diff --git a/src/renderer/views/image/components/ImageCanvas.vue b/src/renderer/views/image/components/ImageCanvas.vue
@@ -5,15 +5,21 @@
         <HistContainer ref="hist-container" :index="index" @changeVisible="handleHistVisible" />
       </CoverMask>
       <el-tooltip placement="bottom" :open-delay="800">
-        <span class="compare-name" flex-box="1" v-html="getTitle"></span>
+        <span
+          class="compare-name"
+          flex-box="1"
+          v-html="isCovering ? coverTitle + ` (${$t('image.covered')})` : getTitle"
+        ></span>
         <div slot="content">
           {{ path }}
           <br />
           <br />
           <span class="size">{{ bitMap && bitMap.width }} x {{ bitMap && bitMap.height }}</span>
         </div>
       </el-tooltip>
-      <EffectPreview ref="effect-settings" @change="changeCanvasStyle" />
+      <div v-show="!isCovering" class="mode-selector" @click="setMode()">{{ mode }}</div>
+      <div v-show="isCovering" class="mode-selector">{{ coverMode }}</div>
+      <EffectPreview ref="effect-settings" :mode="mode" @change="changeCanvasStyle" @set-mode="setMode" />
     </div>
     <div ref="container" class="canvas-container" id="canvas-container" :style="canvasStyle">
       <OperationContainer
@@ -26,7 +32,13 @@
         @dbclick="handleDbclick"
         @mouseMove="handleMove"
       >
-        <div v-loading="loading" element-loading-background="rgba(0, 0, 0, 0)" class="canvas-item" @contextmenu.prevent>
+        <div
+          v-loading="loading"
+          element-loading-background="rgba(0, 0, 0, 0)"
+          class="canvas-item"
+          :style="`width: ${_width}px; height: ${_height}px;`"
+          @contextmenu.prevent
+        >
           <ScaleEditor
             v-if="preference.showScale"
             class="scale-editor"
@@ -42,7 +54,21 @@
             :parentWidth="_width"
             :parentHeight="_height"
           />
-          <canvas ref="canvas" :width="_width" :height="_height"></canvas>
+          <canvas
+            v-show="(!isCovering && mode === 'canvas') || (isCovering && coverMode === 'canvas')"
+            ref="canvas"
+            :width="_width"
+            :height="_height"
+          ></canvas>
+          <img
+            v-show="(!isCovering && mode === 'image') || (isCovering && coverMode === 'image')"
+            :src="isCovering ? coverPath : path"
+            :style="
+              imagePosition
+                ? `position: absolute; left: ${imagePosition.x}px; top: ${imagePosition.y}px; width: ${imagePosition.width}px; height: ${imagePosition.height}px;`
+                : ''
+            "
+          />
           <div v-if="triggerRGB || preference.showDot" ref="feedback" id="feedback" :style="feedbackStyle"></div>
           <div v-if="preference.showMousePos" v-show="mousePosInfo.x" class="mouse-position">
             <span>x={{ mousePosInfo.x.toFixed(2) }},y={{ mousePosInfo.y.toFixed(2) }}</span>
@@ -218,7 +244,12 @@ export default {
       mousePosInfo: {
         x: 0,
         y: 0
-      }
+      },
+      mode: 'image', // 'canvas' | 'image'
+      isCovering: false,
+      coverPath: '',
+      coverTitle: '',
+      coverMode: 'image'
     }
   },
   computed: {
@@ -385,6 +416,9 @@ export default {
       // 叠加显示时候 生成快照
       return {
         snapShot: this.canvas,
+        title: this.getTitle,
+        path: this.path,
+        mode: this.mode,
         hist: this.currentHist
       }
     },
@@ -640,9 +674,20 @@ export default {
         isBright: (0.299 * R + 0.587 * G + 0.114 * B) / 255 >= 0.8
       }
     },
+    setMode(newMode) {
+      this.mode = newMode || (this.mode === 'canvas' ? 'image' : 'canvas')
+    },
     async drawRGBText() {
       const cv = this.$cv
-      if (this.preference.showRGBText && cv && this.imgMat && this.imagePosition && this.image && this.cs && this.imgScaleNum >= 42) {
+      if (
+        this.preference.showRGBText &&
+        cv &&
+        this.imgMat &&
+        this.imagePosition &&
+        this.image &&
+        this.cs &&
+        this.imgScaleNum >= 42
+      ) {
         if (this.drawRGBTextReqId) {
           cancelAnimationFrame(this.drawRGBTextReqId)
           this.drawRGBTextReqId = null
@@ -806,7 +851,11 @@ export default {
       }
     },
     // 外部直接调用
-    setCoverStatus({ snapShot, hist }, status) {
+    setCoverStatus({ snapShot, hist, mode, path, title }, status) {
+      this.isCovering = status
+      this.coverPath = path
+      this.coverTitle = title
+      this.coverMode = mode
       if (status) {
         this.cs.clearRect(0, 0, this.canvas.width, this.canvas.height)
         this.cs.drawImage(snapShot, 0, 0)
@@ -1099,6 +1148,20 @@ export default {
     line-height: 16px;
     background-color: #f6f6f6;
     padding-right: 10px;
+
+    .mode-selector {
+      width: 41px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 4px;
+      padding: 0 2px;
+      border: 1px solid gray;
+      border-radius: 5px;
+      font-size: 11px;
+      color: gray;
+      cursor: pointer;
+    }
   }
 
   .canvas-container {
@@ -1107,10 +1170,10 @@ export default {
       width: 100%;
       height: 100%;
 
-      img {
-        object-fit: contain;
-        vertical-align: middle;
-      }
+      // img {
+      //   object-fit: contain;
+      //   vertical-align: middle;
+      // }
 
       ::v-deep {
         input,

diff --git a/src/renderer/views/video/Content.vue b/src/renderer/views/video/Content.vue
@@ -310,6 +310,7 @@ export default {
       const canvasViews = this.$refs['video_canvas']
       let snapShotArr = []
       let coveredArr = []
+      // TODO: multi canvas to compare
       if ([GLOBAL_CONSTANTS.DIRECTION_LEFT, GLOBAL_CONSTANTS.DIRECTION_RIGHT].includes(direction)) {
         //左右对比,取整行进行比较
         if (columnLen === 3) {