feature: save as webp

june07 · Jan 30, 2025 · e90be0f · e90be0f
1 parent cbbab09
commit e90be0f
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nimv3",
-  "version": "3.11.1",
+  "version": "3.12.0",
   "scripts": {
     "dev": "vite --host",
     "dev:extension": "npm-run-all --parallel build:dev watch:rollup:deps",
@@ -25,6 +25,7 @@
     "async": "^3.2.6",
     "jwt-decode": "^4.0.0",
     "nanoid": "^5.0.8",
+    "posthog-js": "^1.187.1",
     "socket.io-client": "^4.8.1",
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",

diff --git a/src/scripting.js b/src/scripting.js
@@ -13,4 +13,32 @@
         }
         imageEl.style.transform = `rotate(${menuItemId.split('-')[1]}deg)`
     }
+    scripting.saveAsWebp = (options) => {
+        const { srcUrl, quality } = options
+        const img = document.querySelector(`img[src="${srcUrl}"]`)
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+
+        // Set canvas size to match image
+        canvas.width = img.naturalWidth
+        canvas.height = img.naturalHeight
+
+        // Draw the image onto the canvas
+        ctx.drawImage(img, 0, 0)
+
+        // Convert to WebP data URL
+        const webpDataUrl = canvas.toDataURL('image/webp', quality/100)
+
+        let filename = new URL(srcUrl).pathname.split('/').pop()
+        const extension = filename.split('.').pop()
+        filename = filename ? filename.replace(`.${extension}`, '.webp') : 'image.webp'
+
+        // Create a download link and trigger download
+        const link = document.createElement('a')
+        link.href = webpDataUrl
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
 })(typeof module !== 'undefined' && module.exports ? module.exports : (self.scripting = self.scripting || {}))
diff --git a/src/ui/App.vue b/src/ui/App.vue
@@ -12,9 +12,10 @@
             <v-avatar v-if="isAuthenticated" size="x-small">
                 <v-img :src="user?.picture" :alt="user?.name"></v-img>
             </v-avatar>
+            <!--
             <v-btn variant="plain" icon density="compact" @click="login" :loading="loading.login">
                 <span class="material-icons">{{ isAuthenticated ? 'logout' : 'login' }}</span>
-            </v-btn>
+            </v-btn> -->
             <v-btn v-if="notifications && Object.keys(notifications).length" variant="plain" icon density="compact" @click="overlayHandler('messages', true)">
                 <span class="material-icons">notifications</span>
             </v-btn>

diff --git a/src/utilities.js b/src/utilities.js
@@ -40,6 +40,10 @@
     utilities.rotate270 = (info, tab) => utilities.rotate(270, info, tab)
 
     chrome.contextMenus.removeAll(() => {
+        chrome.contextMenus.create({ title: 'Image SaveAs (webp q=1)', id: 'saveas-webp-100', contexts: ['image'] }, () => { })
+        chrome.contextMenus.create({ title: 'Image SaveAs (webp q=0.9)', id: 'saveas-webp-90', contexts: ['image'] }, () => { })
+        chrome.contextMenus.create({ title: 'Image SaveAs (webp q=0.5)', id: 'saveas-webp-50', contexts: ['image'] }, () => { })
+
         chrome.contextMenus.create({ title: 'Image Rotate (0deg)', id: 'rotate-0', contexts: ['image'] }, () => { })
         chrome.contextMenus.create({ title: 'Image Rotate (90deg)', id: 'rotate-90', contexts: ['image'] }, () => { })
         chrome.contextMenus.create({ title: 'Image Rotate (180deg)', id: 'rotate-180', contexts: ['image'] }, () => { })
@@ -62,6 +66,24 @@
             chrome.windows.update(tab.windowId, { width, height }, () => {
                 googleAnalytics.fireEvent('Window Resize', { 'size': `${width}x${height}` })
             })
+        } else if (/saveas-/.test(menuItemId)) {
+            const quality = Number(menuItemId.replace(/saveas-[^-]*-/, ''))
+            const type = menuItemId.match(/saveas-([^-]*)-.*/)[1]
+
+            chrome.scripting.executeScript(
+                {
+                    target: { tabId: tab.id, allFrames: true },
+                    func: scripting.saveAsWebp,
+                    args: [{ type, quality, ...info }]
+                },
+                (injectionResults) => {
+                    if (!injectionResults) return
+                    for (const frameResult of injectionResults) {
+                        if (settings.debugVerbosity >= 7) {
+                            console.log('Utilities:saveAs:InjectionResult: ' + frameResult)
+                        }
+                    }
+                })
         } else {
             chrome.scripting.executeScript(
                 {
@@ -73,7 +95,7 @@
                     if (!injectionResults) return
                     for (const frameResult of injectionResults) {
                         if (settings.debugVerbosity >= 7) {
-                            console.log('Utilities:InjectionResult: ' + frameResult)
+                            console.log('Utilities:rotate:InjectionResult: ' + frameResult)
                         }
                     }
                 })