feat: ✨ 支持从 Canvas 中识别二维码

Author: xiaohuohumax

apps/common/qr-code/CHANGELOG.md

@@ -1,5 +1,11 @@
 # common-qr-code
 
+## 1.3.0
+
+### Minor Changes
+
+- 支持从 Canvas 中识别二维码
+
 ## 1.2.0
 
 ### Minor Changes

apps/common/qr-code/package.json

@@ -1,7 +1,7 @@
 {
   "name": "common-qr-code",
   "type": "module",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "description": "图片二维码识别（Common QR Code）-- 右键图片，识别二维码并复制到剪贴板。",
   "author": {

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

@@ -1,3 +1,4 @@
+import type { ImageElement } from './utils'
 import { GM_registerMenuCommand, GM_setClipboard } from '$'
 import { Notify } from 'notiflix/build/notiflix-notify-aio'
 import Swal from 'sweetalert'
@@ -6,13 +7,14 @@ import { decodeQrCode } from './utils'
 
 console.log(`${ID}(v${VERSION})`)
 
-let image: HTMLImageElement | null = null
+let image: ImageElement | null = null
 
 GM_registerMenuCommand('Decode QR Code', () => {
   if (!image) {
     return Notify.warning('未选择图片, 请先右键选择图片')
   }
-  decodeQrCode(image.src).then((results) => {
+
+  decodeQrCode(image).then((results) => {
     if (results.length === 0) {
       return Notify.warning('未识别到二维码, 请确认图片是否有效')
     }
@@ -68,7 +70,7 @@ GM_registerMenuCommand('Decode QR Code', () => {
 })
 
 document.addEventListener('contextmenu', (event) => {
-  if (event.target instanceof HTMLImageElement) {
+  if (event.target instanceof HTMLImageElement || event.target instanceof HTMLCanvasElement) {
     image = event.target
   }
 })

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

@@ -2,7 +2,9 @@ import { GM_xmlhttpRequest } from '$'
 
 import jsQR from 'jsqr'
 
-export async function decodeQrCode(url: string): Promise<string[]> {
+export type ImageElement = HTMLImageElement | HTMLCanvasElement
+
+export async function decodeQrCode(element: ImageElement): Promise<string[]> {
   return new Promise((resolve, reject) => {
     const image = new Image()
 
@@ -42,18 +44,23 @@ export async function decodeQrCode(url: string): Promise<string[]> {
 
     image.onerror = reject
 
-    GM_xmlhttpRequest({
-      method: 'GET',
-      url,
-      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,
-    })
+    if (element instanceof HTMLImageElement) { // 静态图片
+      GM_xmlhttpRequest({
+        method: 'GET',
+        url: element.src,
+        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,
+      })
+    }
+    else if (element instanceof HTMLCanvasElement) { // Canvas 图片
+      image.src = element.toDataURL()
+    }
   })
 }