feat: support drag compare in image & video page

src/renderer/lang/en.js

@@ -62,7 +62,7 @@ export default {
     delete: 'delete',
     showAll: 'show all',
     history: 'history log',
-    dragDropCompare: 'drag&drop compare',
+    dragDropCompare: 'drag compare',
     imageBrowser: 'image browser',
     imageList: 'Image List',
     videoList: 'Video List',
@@ -92,7 +92,8 @@ export default {
     moveRight: 'move right',
     moveDown: 'move downward',
     pickColor: 'Turn on/off the color picker',
-    rgbText: 'Enable/disable the display of RGB values in each pixel block'
+    rgbText: 'Enable/disable the display of RGB values in each pixel block',
+    compare: "Drag and drop to compare two images"
   },
   dashboard: {
     entries: {
@@ -215,8 +216,8 @@ export default {
     showMousePos: 'show mouse position'
   },
   imageDragDropCompare: {
-    hideLine: 'hide comparison line',
-    displayLine: 'display comparison line',
+    hideLine: 'Hide filenames and comparison line',
+    displayLine: 'Display filenames and comparison line',
     tip: 'By default, the first two pictures that have been selected are compared. If you need to modify, please open the selected to switch.'
   },
   generateGIF: {

src/renderer/lang/ja.js

@@ -92,7 +92,8 @@ export default {
     moveRight: '向右移动',
     moveDown: '下に移動',
     pickColor: 'カラーピッカーのオン/オフを切り替えます',
-    rgbText: '各ピクセルブロックのRGB値の表示を有効/無効にします。'
+    rgbText: '各ピクセルブロックのRGB値の表示を有効/無効にします。',
+    compare: "ドラッグアンドドロップで2つの画像を比較します"
   },
   dashboard: {
     entries: {
@@ -211,8 +212,8 @@ export default {
     showMousePos: 'マウスの位置を表示'
   },
   imageDragDropCompare: {
-    hideLine: '比較ラインを隠す',
-    displayLine: '比較ライン表示',
+    hideLine: 'ファイル名と比較行を非表示にする',
+    displayLine: 'ファイル名と比較行を表示する',
     tip: 'デフォルトでは、選択された画像の最初の2つが比較されます。 変更する場合は、選択を開いて切り替えてください。'
   },
   generateGIF: {

src/renderer/lang/zh.js

@@ -91,7 +91,8 @@ export default {
     moveRight: '向右移动',
     moveDown: '向下移动',
     pickColor: '打开/关闭取色器',
-    rgbText: '启用/关闭RGB数值在每个像素块中的显示'
+    rgbText: '启用/关闭RGB数值在每个像素块中的显示',
+    compare: "对两张图像进行拖拽对比"
   },
   dashboard: {
     entries: {
@@ -213,8 +214,8 @@ export default {
     showMousePos: '显示光标位置'
   },
   imageDragDropCompare: {
-    hideLine: '隐藏比较线',
-    displayLine: '显示比较线',
+    hideLine: '隐藏文件名和比较线',
+    displayLine: '显示文件名和比较线',
     tip: '默认情况下，比较已选的前两张图片。如需修改请打开已选进行切换。'
   },
   generateGIF: {

src/renderer/tools/hotkey.js

@@ -163,7 +163,12 @@ export const DEFAULT_HOTKEYS = [
     name: 'rgbText',
     desc: 'display RGB values in pixel blocks',
     keysArr: [['c']]
-  }
+  },
+  {
+    name: 'compare',
+    desc: 'compare two image',
+    keysArr: [[ctrlOrCommand, 'x']]
+  },
 ].map((item, index) => {
   item.index = index
   return item

src/renderer/views/image/Content.vue

@@ -74,6 +74,10 @@ export default {
           event: 'share',
           action: 'share'
         },
+        {
+          event: 'compare',
+          action: 'compare'
+        },
         {
           event: 'imageCenter_exportImage',
           action: 'exportImage'
@@ -284,6 +288,44 @@ export default {
         canvasContainer.reDraw(true)
       })
     },
+    async compare() {
+      const canvasViews = this.$refs['image_canvas']
+      const twoCanvas = (
+        await Promise.allSettled(
+          canvasViews.slice(0, 2).map(async (canvas, index) => {
+            const shareCanvas = {
+              index,
+              name: '',
+              _width: 0,
+              _height: 0,
+              imagePosition: {},
+              radius: 10,
+              imgScale: '1',
+              displayTimestamp: 0,
+              displayedFrames: 0
+            }
+            Object.keys(shareCanvas).forEach((key) => {
+              if (canvas[key] !== void 0) {
+                shareCanvas[key] = canvas[key]
+              }
+            })
+            const { snapshotMode: _snapshotMode, path, image } = canvas
+            shareCanvas.path = path
+            const imageBlob = await this.imageToBlob(image)
+            shareCanvas.imageUrl = URL.createObjectURL(imageBlob)
+            console.log(shareCanvas)
+            shareCanvas.name = canvas.getName(false)
+            return shareCanvas
+          })
+        )
+      ).map((i) => i.value)
+      twoCanvas.sort((a, b) => a.index - b.index)
+      console.log('twoCanvas', twoCanvas)
+      this.$parent.showCompare = true
+      setTimeout(() => {
+        this.$parent.$refs.imageDragCompareRef.setImageInfoList(twoCanvas)
+      }, 0)
+    },
     async share() {
       this.$message.info(i18nRender(`image.toolbar.snapshotGenerating`))
       // shareProject

src/renderer/views/image/ImageCompare.vue

@@ -1,20 +1,33 @@
 <template>
   <div class="image-center" flex="dir:top box:first">
-    <Toolbar v-bind:snapshotMode="snapshotMode"></Toolbar>
-    <Content v-bind:snapshotMode="snapshotMode" ref="content" class="content-container"></Content>
+    <Toolbar v-show="!showCompare" v-bind:snapshotMode="snapshotMode"></Toolbar>
+    <Content v-show="!showCompare" v-bind:snapshotMode="snapshotMode" ref="content" class="content-container"></Content>
+    <ImageDragDropCompare
+      ref="imageDragCompareRef"
+      v-show="showCompare"
+      v-model="showCompare"
+      :isExternal="true"
+    ></ImageDragDropCompare>
   </div>
 </template>
 
 <script>
 import Toolbar from './Toolbar'
 import Content from './Content'
+import ImageDragDropCompare from '../image/ImageDragDropCompare'
 import { useWorker } from '@/utils/worker'
 
 export default {
   name: 'image-compare',
   components: {
     Toolbar,
-    Content
+    Content,
+    ImageDragDropCompare
+  },
+  data() {
+    return {
+      showCompare: false
+    }
   },
   computed: {
     snapshotMode() {