feat: ✨ 支持识别图片链接中的二维码信息

Author: xiaohuohumax

apps/common/qr-code/CHANGELOG.md

@@ -1,5 +1,11 @@
 # common-qr-code
 
+## 1.6.0
+
+### Minor Changes
+
+- 支持识别图片链接中的二维码信息
+
 ## 1.5.0
 
 ### Minor Changes

apps/common/qr-code/README.md

@@ -19,6 +19,8 @@
 
 ![](https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/apps/common/qr-code/images/use.gif)
 
+![](https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/apps/common/qr-code/images/selection.gif)
+
 ![](https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/apps/common/qr-code/images/encdoe.gif)
 
 ## 🚨 免责声明

apps/common/qr-code/images/selection.gif

@@ -1,7 +1,7 @@
 {
   "name": "common-qr-code",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "description": "图片二维码识别/生成工具（Common QR Code）-- 右键图片，识别二维码并复制到剪贴板。右键文字，生成二维码并展示。",
   "author": {
@@ -24,6 +24,7 @@
     "build": "vite build --emptyOutDir=false"
   },
   "dependencies": {
+    "get-urls": "^12.1.0",
     "jsqr": "^1.4.0",
     "notiflix": "^3.2.8",
     "qrcode": "^1.5.4",

apps/common/qr-code/package.json

@@ -1,23 +1,31 @@
-import type { ImageElement } from './utils'
+import type { Target } from './utils'
 import { GM_download, GM_registerMenuCommand, GM_setClipboard } from '$'
 import { Notify } from 'notiflix/build/notiflix-notify-aio'
 import QRCode from 'qrcode'
 import Swal from 'sweetalert'
 import { ID, VERSION } from 'virtual:meta'
 
-import { decodeQrCode, isUrl } from './utils'
+import { decodeQrCode, isUrl, tryGetUrls } from './utils'
 
 console.log(`${ID}(v${VERSION})`)
 
-let image: ImageElement | null = null
+let target: Target | null = null
 let selection: string | null = null
 
 function handleDecodeQrCodeMenuClick() {
-  if (!image) {
-    return Notify.warning('未选择图片, 请先右键选择图片')
+  if (selection !== null) {
+    const urls = tryGetUrls(selection)
+    if (urls.length === 0) {
+      return Notify.warning('选择的文本中未找到有效的链接, 请确认文本是否有效')
+    }
+    target = urls[0]
+  }
+
+  if (target === null) {
+    return Notify.warning('未选择图片或图片链接, 请先右键选择图片或图片链接')
   }
 
-  decodeQrCode(image).then((results) => {
+  decodeQrCode(target).then((results) => {
     if (results.length === 0) {
       return Notify.warning('未识别到二维码, 请确认图片是否有效')
     }
@@ -89,7 +97,7 @@ function handleDecodeQrCodeMenuClick() {
   }).catch((error) => {
     Notify.failure('识别失败, 请检查图片是否有效')
     console.error(error)
-  }).finally(() => (image = null))
+  }).finally(() => (target = null))
 }
 
 async function handleEncodeQrCodeMenuClick() {
@@ -126,7 +134,7 @@ GM_registerMenuCommand('Encode QR Code', handleEncodeQrCodeMenuClick)
 
 document.addEventListener('contextmenu', (event) => {
   if (event.target instanceof HTMLImageElement || event.target instanceof HTMLCanvasElement) {
-    image = event.target
+    target = event.target
   }
 })
 

apps/common/qr-code/src/index.ts

@@ -1,9 +1,10 @@
 import { GM_xmlhttpRequest } from '$'
+import getUrls from 'get-urls'
 import jsQR from 'jsqr'
 
-export type ImageElement = HTMLImageElement | HTMLCanvasElement
+export type Target = HTMLImageElement | HTMLCanvasElement | URL
 
-export async function decodeQrCode(element: ImageElement): Promise<string[]> {
+export async function decodeQrCode(target: Target): Promise<string[]> {
   return new Promise((resolve, reject) => {
     const image = new Image()
 
@@ -43,10 +44,10 @@ export async function decodeQrCode(element: ImageElement): Promise<string[]> {
 
     image.onerror = reject
 
-    if (element instanceof HTMLImageElement) { // 静态图片
+    if (target instanceof HTMLImageElement || target instanceof URL) { // 静态图片 或者 URL 图片
       GM_xmlhttpRequest({
         method: 'GET',
-        url: element.src,
+        url: target instanceof URL ? target.toString() : target.src,
         responseType: 'blob',
         onload: (response) => {
           if (response.status !== 200) {
@@ -58,12 +59,16 @@ export async function decodeQrCode(element: ImageElement): Promise<string[]> {
         onerror: reject,
       })
     }
-    else if (element instanceof HTMLCanvasElement) { // Canvas 图片
-      image.src = element.toDataURL()
+    else if (target instanceof HTMLCanvasElement) { // Canvas 图片
+      image.src = target.toDataURL()
     }
   })
 }
 
+export function tryGetUrls(text: string): URL[] {
+  return Array.from(getUrls(text)).map(url => new URL(url))
+}
+
 export function isUrl(url: string): boolean {
   return /^https?:\/\//.test(url.trimStart())
 }