feat: ✨ 新增文字生成二维码功能

Author: xiaohuohumax

apps/common/qr-code/CHANGELOG.md

@@ -1,5 +1,11 @@
 # common-qr-code
 
+## 1.5.0
+
+### Minor Changes
+
+- 新增文字生成二维码功能
+
 ## 1.4.0
 
 ### Minor Changes

apps/common/qr-code/README.md

@@ -1,6 +1,6 @@
-# 图片二维码识别（Common QR Code）
+# 图片二维码识别/生成工具（Common QR Code）
 
-**右键图片，识别二维码并复制到剪贴板。**
+**右键图片，识别二维码并复制到剪贴板。右键文字，生成二维码并展示。**
 
 ## 📋 更新日志
 
@@ -9,3 +9,5 @@
 ## 📖 使用方式
 
 ![](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/encdoe.gif)

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

@@ -1,9 +1,9 @@
 {
   "name": "common-qr-code",
   "type": "module",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "private": true,
-  "description": "图片二维码识别（Common QR Code）-- 右键图片，识别二维码并复制到剪贴板。",
+  "description": "图片二维码识别/生成工具（Common QR Code）-- 右键图片，识别二维码并复制到剪贴板。右键文字，生成二维码并展示。",
   "author": {
     "name": "xiaohuohumax",
     "url": "https://github.com/xiaohuohumax"
@@ -26,9 +26,11 @@
   "dependencies": {
     "jsqr": "^1.4.0",
     "notiflix": "^3.2.8",
+    "qrcode": "^1.5.4",
     "sweetalert": "^2.1.2"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.6",
     "vite-plugin-meta": "workspace:^"
   }
 }

apps/common/qr-code/package.json

@@ -1,15 +1,18 @@
 import type { ImageElement } from './utils'
-import { GM_registerMenuCommand, GM_setClipboard } from '$'
+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'
 
 console.log(`${ID}(v${VERSION})`)
 
 let image: ImageElement | null = null
+let selection: string | null = null
 
-GM_registerMenuCommand('Decode QR Code', () => {
+function handleDecodeQrCodeMenuClick() {
   if (!image) {
     return Notify.warning('未选择图片, 请先右键选择图片')
   }
@@ -87,10 +90,46 @@ GM_registerMenuCommand('Decode QR Code', () => {
     Notify.failure('识别失败, 请检查图片是否有效')
     console.error(error)
   }).finally(() => (image = null))
-})
+}
+
+async function handleEncodeQrCodeMenuClick() {
+  if (selection === null) {
+    return Notify.warning('未选择文字, 请先右键选择文字')
+  }
+
+  const dataUrl = await QRCode.toDataURL(selection)
+  const element = document.createElement('img')
+  element.src = dataUrl
+  element.style.margin = '0 auto'
+
+  Swal({
+    icon: 'success',
+    title: '生成二维码成功',
+    content: {
+      element,
+    },
+    buttons: {
+      confirm: {
+        text: '保存到本地',
+        value: 'save',
+      },
+    },
+  }).then((result) => {
+    if (result === 'save') {
+      GM_download({ name: 'qrcode.png', url: dataUrl, saveAs: true })
+    }
+  }).finally(() => (selection = null))
+}
+
+GM_registerMenuCommand('Decode QR Code', handleDecodeQrCodeMenuClick)
+GM_registerMenuCommand('Encode QR Code', handleEncodeQrCodeMenuClick)
 
 document.addEventListener('contextmenu', (event) => {
   if (event.target instanceof HTMLImageElement || event.target instanceof HTMLCanvasElement) {
     image = event.target
   }
 })
+
+document.addEventListener('selectionchange', () => {
+  selection = document.getSelection()?.toString() || null
+})

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

@@ -1,5 +1,4 @@
 import { GM_xmlhttpRequest } from '$'
-
 import jsQR from 'jsqr'
 
 export type ImageElement = HTMLImageElement | HTMLCanvasElement

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

@@ -17,8 +17,8 @@ export default defineConfig({
         },
       },
       userscript: {
-        'name': '图片二维码识别（Common QR Code）',
-        'description': '右键图片，识别二维码并复制到剪贴板。',
+        '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',