chore: upgrade the version of Electron; support show HDR Image

MegEngine · Aug 11, 2024 · e3b8e52 · e3b8e52
1 parent 76a7e7b
commit e3b8e52
Show file tree

Hide file tree

Showing 11 changed files with 5,227 additions and 4,542 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
           cache: 'yarn'
 
       - name: Build/release Electron app

diff --git a/package.json b/package.json
@@ -171,8 +171,8 @@
     "css-loader": "^5.0.1",
     "del": "^6.0.0",
     "dmg-builder": "23.6.0",
-    "electron": "^22.0.0",
-    "electron-builder": "23.6.0",
+    "electron": "^31.3.1",
+    "electron-builder": "^24.13.3",
     "electron-devtools-vendor": "^1.1.0",
     "electron-playwright-helpers": "^1.2.0",
     "esbuild-loader": "^2.19.0",
@@ -234,7 +234,7 @@
     }
   },
   "volta": {
-    "node": "16.20.2",
+    "node": "20.16.0",
     "yarn": "1.22.21"
   }
-}
+}
diff --git a/src/renderer/components/effect-preview/index.vue b/src/renderer/components/effect-preview/index.vue
@@ -134,7 +134,7 @@
           <el-slider :min="0" :max="15" v-model="blur" show-input></el-slider>
         </el-col>
       </el-row>
-      <el-row :gutter="10" flex="cross:center">
+      <!-- <el-row :gutter="10" flex="cross:center">
         <el-col :span="6">
           <span class="text-style">{{ $t('imagePreview.gamma') }}</span>
         </el-col>
@@ -228,7 +228,7 @@
             />
           </div>
         </el-col>
-      </el-row>
+      </el-row> -->
       <div flex="main:justify">
         <el-switch v-model="enableXray" active-text="Xray"></el-switch>
         <el-button @click="resetImageStyle">{{ $t('imagePreview.resetAll') }}</el-button>

diff --git a/src/renderer/utils/worker.js b/src/renderer/utils/worker.js
@@ -1,6 +1,6 @@
 import path from 'path'
 
-const workerPath = path.join(__static, '/sw.js')
+const workerPath = 'file:///' + path.join(__static, '/sw.js')
 
 export const useWorker = (id, type, imageData, params) => {
   return new Promise(async (resolve, reject) => {

diff --git a/src/renderer/views/image/ImageCompare.vue b/src/renderer/views/image/ImageCompare.vue
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     async initFiltersMap() {
-      await useWorker('all', 'initFiltersMap')
+      // await useWorker('all', 'initFiltersMap')
     },
   }
 }

diff --git a/src/renderer/views/image/Toolbar.vue b/src/renderer/views/image/Toolbar.vue
@@ -32,7 +32,7 @@
         <el-radio-button :label="false">{{ $t('imageCenter.nearestInterpolation') }}</el-radio-button>
         <el-radio-button :label="true">{{ $t('imageCenter.bilinearInterpolation') }}</el-radio-button>
       </el-radio-group>
-      <RGBTextBtn class="gap" />
+      <!-- <RGBTextBtn class="gap" /> -->
       <el-button
         v-if="snapshotMode"
         type="text"

diff --git a/src/renderer/views/image/components/ImageCanvas.vue b/src/renderer/views/image/components/ImageCanvas.vue
@@ -61,12 +61,21 @@
             :height="_height"
           ></canvas>
           <img
-            v-show="(!isCovering && mode === 'image') || (isCovering && coverMode === 'image')"
-            :src="isCovering ? coverPath : path"
+            v-show="!isCovering && mode === 'image'"
+            :src="imgPath"
             :style="
-              imagePosition
+              (imagePosition
                 ? `position: absolute; left: ${imagePosition.x}px; top: ${imagePosition.y}px; width: ${imagePosition.width}px; height: ${imagePosition.height}px;`
-                : ''
+                : '') + effectStyle
+            "
+          />
+          <img
+            v-show="isCovering && coverMode === 'image'"
+            :src="coverPath"
+            :style="
+              (imagePosition
+                ? `position: absolute; left: ${imagePosition.x}px; top: ${imagePosition.y}px; width: ${imagePosition.width}px; height: ${imagePosition.height}px;`
+                : '') + effectStyle
             "
           />
           <div v-if="triggerRGB || preference.showDot" ref="feedback" id="feedback" :style="feedbackStyle"></div>
@@ -249,7 +258,8 @@ export default {
       isCovering: false,
       coverPath: '',
       coverTitle: '',
-      coverMode: 'image'
+      coverMode: 'image',
+      effectStyle: ''
     }
   },
   computed: {
@@ -314,6 +324,9 @@ export default {
     },
     imgScaleNum() {
       return !isNaN(this.imgScale) ? Number(this.imgScale) : 0
+    },
+    imgPath() {
+      return getImageUrlSyncNoCache(this.path)
     }
   },
   async mounted() {
@@ -404,6 +417,7 @@ export default {
       return this.afterFullSize || !isTooSmall
     },
     setCanvasStyle({ style }) {
+      this.effectStyle = `filter: ${style}`
       this.canvas.style.filter = style
     },
     setSmooth() {
@@ -417,7 +431,7 @@ export default {
       return {
         snapShot: this.canvas,
         title: this.getTitle,
-        path: this.path,
+        path: this.imgPath,
         mode: this.mode,
         hist: this.currentHist
       }
@@ -527,27 +541,27 @@ export default {
             })
           : this.getImageData()
         this.bitMap = await createImageBitmap(imageData)
-        useWorker(this.getName(false), 'all', imageData, this.$refs['effect-settings'].generateFilterParams({})).then(
-          (res) => {
-            this.bitMap && this.bitMap?.close()
-            this.bitMap = null
-            this.bitMap = res
-            this.drawImage()
-          }
-        )
+        // useWorker(this.getName(false), 'all', imageData, this.$refs['effect-settings'].generateFilterParams({})).then(
+        //   (res) => {
+        //     this.bitMap && this.bitMap?.close()
+        //     this.bitMap = null
+        //     this.bitMap = res
+        //     this.drawImage()
+        //   }
+        // )
         resolve(this.bitMap)
       })
     },
     applyFilters(type, params) {
       if (!this.ready) {
         return
       }
-      const imageData = this.getImageData()
-      useWorker(this.getName(false), type, imageData, params).then((res) => {
-        this.bitMap && this.bitMap?.close()
-        this.bitMap = res
-        this.drawImage()
-      })
+      // const imageData = this.getImageData()
+      // useWorker(this.getName(false), type, imageData, params).then((res) => {
+      //   this.bitMap && this.bitMap?.close()
+      //   this.bitMap = res
+      //   this.drawImage()
+      // })
     },
     async adjustGamma({ parentId, ...params }) {
       const { gamma } = params
@@ -595,12 +609,12 @@ export default {
               })
             })
         } else {
-          resolve(getImageUrlSyncNoCache(this.path)) //        'C:/Demo/1-1%20-%20副本.jpg'
+          resolve(this.imgPath) //        'C:/Demo/1-1%20-%20副本.jpg'
         }
       })
     },
     async initFilters() {
-      await useWorker(this.getName(false), 'initFilters')
+      // await useWorker(this.getName(false), 'initFilters')
     },
     getImageData(_img) {
       const img = _img ?? this.image

diff --git a/src/renderer/views/video/Toolbar.vue b/src/renderer/views/video/Toolbar.vue
@@ -30,7 +30,7 @@
         <el-radio-button :label="false">{{ $t('imageCenter.nearestInterpolation') }}</el-radio-button>
         <el-radio-button :label="true">{{ $t('imageCenter.bilinearInterpolation') }}</el-radio-button>
       </el-radio-group>
-      <RGBTextBtn class="gap" />
+      <!-- <RGBTextBtn class="gap" /> -->
     </div>
     <div class="tip" flex="cross:center">
       <div class="select">

diff --git a/src/renderer/views/video/VideoCompare.vue b/src/renderer/views/video/VideoCompare.vue
@@ -37,7 +37,7 @@ export default {
   },
   methods: {
     async initFiltersMap() {
-      await useWorker('all', 'initFiltersMap')
+      // await useWorker('all', 'initFiltersMap')
     }
   }
 }

diff --git a/src/renderer/views/video/components/videoCanvas.vue b/src/renderer/views/video/components/videoCanvas.vue
@@ -259,14 +259,14 @@ export default {
           event: 'setZoom',
           action: 'setZoom'
         },
-        // {
-        //   event: 'adjustLevels',
-        //   action: 'adjustLevels'
-        // },
-        // {
-        //   event: 'adjustGamma',
-        //   action: 'adjustGamma'
-        // },
+        {
+          event: 'adjustLevels',
+          action: 'adjustLevels'
+        },
+        {
+          event: 'adjustGamma',
+          action: 'adjustGamma'
+        },
         {
           event: 'changeHistTypes',
           action: 'handleChangeHistTypes'
@@ -753,7 +753,7 @@ export default {
         this.ready = true
         draw && this.drawImage(this.bitMap)
         this.$refs['hist-container'].visible && window.cv && this.generateHist()
-        // const imageData = this.getImageData()
+        const imageData = this.getImageData()
         // console.log('imageDate initbitmap', imageData)
         // useWorker(this.getName(false), 'all', imageData, this.$refs['effect-settings'].generateFilterParams({})).then(
         //   (res) => {
@@ -789,16 +789,16 @@ export default {
       return _ctx.getImageData(0, 0, _canvas.width, _canvas.height)
     },
     async initFilters() {
-      await useWorker(this.getName(false), 'initFilters')
+      // await useWorker(this.getName(false), 'initFilters')
     },
     applyFilters(type, params) {
       if (this.paused && this.ready) {
-        const imageData = this.getImageData()
-        useWorker(this.getName(false), type, imageData, params).then((res) => {
-          this.bitMap && this.bitMap?.close()
-          this.bitMap = res
-          this.drawImage()
-        })
+        // const imageData = this.getImageData()
+        // useWorker(this.getName(false), type, imageData, params).then((res) => {
+        //   this.bitMap && this.bitMap?.close()
+        //   this.bitMap = res
+        //   this.drawImage()
+        // })
       }
     },
     async adjustGamma({ parentId, ...params }) {