@forge-kit/plugin-qr-code 0.0.1

package/src/main.tsx

@@ -0,0 +1,30 @@
+import {StrictMode} from 'react'
+import ReactDOM from "react-dom/client";
+import {definePlugin} from '@forge-kit/types'
+import {App} from '@/App.tsx'
+
+let rootInstance: ReturnType<typeof ReactDOM.createRoot> | null = null;
+
+const plugin = definePlugin({
+    bundleId: "com.forge-kit.plugin.qr-code",
+    name: '二维码生成与解析工具',
+    icon: `${import.meta.env.BASE_URL}icon.svg`,
+    description: "二维码生成与解析工具",
+    mount: (container, props = {}) => {
+        rootInstance = ReactDOM.createRoot(container);
+        rootInstance.render(
+            <StrictMode>
+                <App {...props}/>
+            </StrictMode>,
+        )
+    },
+    unmount: () => {
+        if (!rootInstance) return
+        rootInstance.unmount();
+        rootInstance = null;
+    }
+});
+if (import.meta.env.DEV) plugin.mount(document.getElementById('root')!)
+
+export default plugin
+

package/src/utils/qr-code.ts

@@ -0,0 +1,85 @@
+import jsQR from 'jsqr'
+import QRCode from 'qrcode'
+import type {QRCodeErrorCorrectionLevel} from 'qrcode'
+
+export const QR_ERROR_CORRECTION_LEVEL_OPTIONS: QRCodeErrorCorrectionLevel[] = ['L', 'M', 'Q', 'H']
+
+export interface GenerateQrOptions {
+    width: number
+    margin: number
+    errorCorrectionLevel: QRCodeErrorCorrectionLevel
+}
+
+export const generateQrDataUrl = async (content: string, options: GenerateQrOptions): Promise<string> => {
+    return QRCode.toDataURL(content, options)
+}
+
+const getDecode2dContext = (width: number, height: number): {
+    context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+    width: number
+    height: number
+} => {
+    if (typeof OffscreenCanvas !== 'undefined') {
+        const offscreenCanvas = new OffscreenCanvas(width, height)
+        const context = offscreenCanvas.getContext('2d', {willReadFrequently: true})
+        if (!context) throw new Error('无法创建 Canvas 上下文')
+        return {context, width, height}
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = width
+    canvas.height = height
+
+    const context = canvas.getContext('2d', {willReadFrequently: true})
+    if (!context) throw new Error('无法创建 Canvas 上下文')
+    return {context, width: canvas.width, height: canvas.height}
+}
+
+export const decodeQrFromImageUrl = async (imageUrl: string): Promise<string> => {
+    const img = await new Promise<HTMLImageElement>((resolve, reject) => {
+        const image = new Image()
+        image.onload = () => resolve(image)
+        image.onerror = () => reject(new Error('图片加载失败'))
+        image.src = imageUrl
+    })
+
+    const {context, width, height} = getDecode2dContext(img.naturalWidth, img.naturalHeight)
+
+    context.drawImage(img, 0, 0)
+    const imageData = context.getImageData(0, 0, width, height)
+
+    const result = jsQR(imageData.data, imageData.width, imageData.height, {
+        inversionAttempts: 'attemptBoth',
+    })
+
+    if (!result?.data) {
+        throw new Error('未识别到二维码，请尝试更清晰的图片')
+    }
+
+    return result.data
+}
+
+export const getImageFileFromFileList = (files: FileList | null): File | null => {
+    if (!files || files.length === 0) return null
+    for (const file of files) {
+        if (file.type.startsWith('image/')) return file
+    }
+    return null
+}
+
+export const getImageFileFromClipboard = (clipboardData: DataTransfer | null): File | null => {
+    if (!clipboardData) return null
+    for (const item of clipboardData.items) {
+        if (item.kind === 'file' && item.type.startsWith('image/')) {
+            return item.getAsFile()
+        }
+    }
+    return null
+}
+
+export const downloadDataUrl = (dataUrl: string, filename: string) => {
+    const link = document.createElement('a')
+    link.href = dataUrl
+    link.download = filename
+    link.click()
+}