init: 🎉 添加图片二维码识别脚本

Author: xiaohuohumax

.vscode/settings.json

@@ -89,13 +89,19 @@
     "antfu",
     "bili",
     "bilibili",
+    "binarize",
+    "binarized",
     "breakline",
     "commitlint",
     "contenteditable",
     "dede",
+    "jsqr",
     "labelledby",
+    "notiflix",
+    "nuintun",
     "onurlchange",
     "prefixs",
+    "qrcode",
     "radash",
     "swal",
     "sweetalert",
@@ -112,6 +118,7 @@
   ],
   "cSpell.ignorePaths": [
     "*.yaml",
-    "*.vscode"
+    "*.vscode",
+    "dist/*.user.js"
   ]
 }

apps/common/qr-code/CHANGELOG.md

@@ -0,0 +1,7 @@
+# common-qr-code
+
+## 1.0.0
+
+### Major Changes
+
+- init

apps/common/qr-code/README.md

@@ -0,0 +1,11 @@
+# 图片二维码识别（Common QR Code）
+
+**右键图片，识别二维码并复制到剪贴板。**
+
+## 📋 更新日志
+
+[CHANGELOG](https://github.com/xiaohuohumax/userscripts/blob/main/apps/common/qr-code/CHANGELOG.md)
+
+## 📖 使用方式
+
+![](https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/apps/common/qr-code/images/use.gif)

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

@@ -0,0 +1,33 @@
+{
+  "name": "common-qr-code",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "description": "图片二维码识别（Common QR Code）-- 右键图片，识别二维码并复制到剪贴板。",
+  "author": {
+    "name": "xiaohuohumax",
+    "url": "https://github.com/xiaohuohumax"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xiaohuohumax/userscripts.git"
+  },
+  "keywords": [
+    "typescript",
+    "tampermonkey",
+    "common",
+    "qr-code"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --emptyOutDir=false"
+  },
+  "dependencies": {
+    "jsqr": "^1.4.0",
+    "notiflix": "^3.2.8"
+  },
+  "devDependencies": {
+    "vite-plugin-meta": "workspace:^"
+  }
+}

apps/common/qr-code/package.json

@@ -0,0 +1,31 @@
+import { GM_registerMenuCommand, GM_setClipboard } from '$'
+import { Notify } from 'notiflix/build/notiflix-notify-aio'
+import { ID, VERSION } from 'virtual:meta'
+
+import { decodeQrCode } from './utils'
+
+console.log(`${ID}(v${VERSION})`)
+
+let image: HTMLImageElement | null = null
+
+GM_registerMenuCommand('Decode QR Code', () => {
+  if (!image) {
+    return Notify.warning('未选择图片, 请先右键选择图片')
+  }
+  decodeQrCode(image.src).then((data) => {
+    if (data === undefined) {
+      return Notify.warning('未识别到二维码, 请确认图片是否有效')
+    }
+    Notify.success('识别成功, 已复制到剪贴板')
+    GM_setClipboard(data, 'text')
+  }).catch((error) => {
+    Notify.failure('识别失败, 请检查图片是否有效')
+    console.error(error)
+  }).finally(() => (image = null))
+})
+
+document.addEventListener('contextmenu', (event) => {
+  if (event.target instanceof HTMLImageElement) {
+    image = event.target
+  }
+})

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

@@ -0,0 +1,35 @@
+import { GM_xmlhttpRequest } from '$'
+
+import jsQR from 'jsqr'
+
+export async function decodeQrCode(url: string): Promise<string | undefined> {
+  return new Promise((resolve, reject) => {
+    const image = new Image()
+
+    image.onload = () => {
+      const { width, height } = image
+      const canvas = new OffscreenCanvas(width, height)
+      const context = canvas.getContext('2d')!
+      context.drawImage(image, 0, 0)
+      const imageData = context.getImageData(0, 0, width, height)
+      resolve(jsQR(imageData.data, width, height)?.data.replace(/^\s+|\s+$/g, ''))
+    }
+
+    image.onerror = reject
+
+    GM_xmlhttpRequest({
+      method: 'GET',
+      url,
+      anonymous: true,
+      responseType: 'blob',
+      onload: (response) => {
+        if (response.status !== 200) {
+          reject(new Error(`Failed to load image: ${response.status} ${response.statusText}`))
+          return
+        }
+        image.src = URL.createObjectURL(response.response)
+      },
+      onerror: reject,
+    })
+  })
+}

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

@@ -0,0 +1,14 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "types": [
+      "vite/client",
+      "vite-plugin-monkey/client",
+      "vite-plugin-meta/client"
+    ]
+  },
+  "include": [
+    "src",
+    "*.d.ts"
+  ]
+}

apps/common/qr-code/tsconfig.json

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import meta from 'vite-plugin-meta'
+import monkey, { cdn } from 'vite-plugin-monkey'
+
+export default defineConfig({
+  build: {
+    outDir: '../../../dist/',
+  },
+  plugins: [
+    meta(),
+    monkey({
+      entry: 'src/index.ts',
+      build: {
+        externalGlobals: {
+          'jsqr': cdn.unpkg('jsQR', 'dist/jsQR.js'),
+          'notiflix/build/notiflix-notify-aio': cdn.unpkg('Notiflix', 'build/notiflix-notify-aio.js'),
+        },
+      },
+      userscript: {
+        'name': '图片二维码识别（Common QR Code）',
+        'description': '右键图片，识别二维码并复制到剪贴板。',
+        'icon': 'https://raw.githubusercontent.com/xiaohuohumax/logo/refs/heads/main/logos/logo.svg',
+        'namespace': 'xiaohuohumax/userscripts/common-qr-code',
+        'license': 'MIT',
+        'updateURL': 'https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/dist/common-qr-code.user.js',
+        'downloadURL': 'https://raw.githubusercontent.com/xiaohuohumax/userscripts/main/dist/common-qr-code.user.js',
+        'noframes': true,
+        'run-at': 'document-start',
+        'match': [
+          'http*://*/*',
+        ],
+      },
+    }),
+  ],
+})