🐛 Fix: macos clipboard image can't show on tray page

ISSUES CLOSED: #961

src/main/apis/app/system/index.ts

@@ -1,3 +1,4 @@
+import fs from 'fs-extra'
 import {
   app,
   Menu,
@@ -15,7 +16,7 @@ import { IWindowList } from '#/types/enum'
 import picgo from '@core/picgo'
 import pasteTemplate from '~/main/utils/pasteTemplate'
 import pkg from 'root/package.json'
-import { handleCopyUrl } from '~/main/utils/common'
+import { ensureFilePath, handleCopyUrl } from '~/main/utils/common'
 import { privacyManager } from '~/main/utils/privacyManager'
 // import { T } from '#/i18n'
 import { T } from '~/main/i18n'
@@ -173,18 +174,37 @@ export function createTray () {
     tray.on('click', (event, bounds) => {
       if (process.platform === 'darwin') {
         toggleWindow(bounds)
-        setTimeout(() => {
+        setTimeout(async () => {
           const img = clipboard.readImage()
           const obj: ImgInfo[] = []
           if (!img.isEmpty()) {
             // 从剪贴板来的图片默认转为png
-            // @ts-ignore
-            const imgUrl = 'data:image/png;base64,' + Buffer.from(img.toPNG(), 'binary').toString('base64')
-            obj.push({
-              width: img.getSize().width,
-              height: img.getSize().height,
-              imgUrl
-            })
+            // https://github.com/electron/electron/issues/9035
+            const imgPath = clipboard.read('public.file-url')
+            if (imgPath) {
+              const decodePath = ensureFilePath(imgPath)
+              if (decodePath === imgPath) {
+                obj.push({
+                  imgUrl: imgPath
+                })
+              } else {
+                if (decodePath !== '') {
+                  // 带有中文的路径，无法直接被img.src所使用，会被转义
+                  const base64 = await fs.readFile(decodePath.replace('file://', ''), { encoding: 'base64' })
+                  obj.push({
+                    imgUrl: `data:image/png;base64,${base64}`
+                  })
+                }
+              }
+            } else {
+              const imgUrl = img.toDataURL()
+              // console.log(imgUrl)
+              obj.push({
+                width: img.getSize().width,
+                height: img.getSize().height,
+                imgUrl
+              })
+            }
           }
           windowManager.get(IWindowList.TRAY_WINDOW)!.webContents.send('clipboardFiles', obj)
         }, 0)

src/main/apis/app/window/windowList.ts

@@ -41,7 +41,8 @@ windowList.set(IWindowList.TRAY_WINDOW, {
         nodeIntegration: !!process.env.ELECTRON_NODE_INTEGRATION,
         contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
         nodeIntegrationInWorker: true,
-        backgroundThrottling: false
+        backgroundThrottling: false,
+        webSecurity: false
       }
     }
   },

src/main/utils/common.ts

@@ -1,3 +1,4 @@
+import fs from 'fs-extra'
 import db from '~/main/apis/core/datastore'
 import { clipboard, Notification, dialog } from 'electron'
 
@@ -69,3 +70,19 @@ export const calcDurationRange = (duration: number) => {
   // max range
   return 100000
 }
+
+/**
+ * macOS public.file-url will get encoded file path,
+ * so we need to decode it
+ */
+export const ensureFilePath = (filePath: string, prefix = 'file://'): string => {
+  filePath = filePath.replace(prefix, '')
+  if (fs.existsSync(filePath)) {
+    return `${prefix}${filePath}`
+  }
+  filePath = decodeURIComponent(filePath)
+  if (fs.existsSync(filePath)) {
+    return `${prefix}${filePath}`
+  }
+  return ''
+}

src/renderer/pages/TrayPage.vue

@@ -107,7 +107,6 @@ export default class extends Vue {
     })
     ipcRenderer.on('uploadFiles', async () => {
       this.files = (await this.$$db.get<ImgInfo>({ orderBy: 'desc', limit: 5 })).data
-      console.log(this.files)
       this.uploadFlag = false
     })
     ipcRenderer.on('updateFiles', () => {