diff --git a/package-lock.json b/package-lock.json index 0719147..4f07fd1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,6 +47,7 @@ "node-forge": "^1.3.1", "prettier": "^3.1.1", "qrcode": "^1.5.3", + "qrcode-parser": "^2.1.3", "qs": "^6.11.2", "rc-table": "^7.36.0", "react": "^18.2.0", @@ -5633,6 +5634,11 @@ "node": "*" } }, + "node_modules/jsqr": { + "version": "1.4.0", + "resolved": "https://registry.npmmirror.com/jsqr/-/jsqr-1.4.0.tgz", + "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==" + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "resolved": "https://registry.npmmirror.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz", @@ -7342,6 +7348,14 @@ "node": ">=10.13.0" } }, + "node_modules/qrcode-parser": { + "version": "2.1.3", + "resolved": "https://registry.npmmirror.com/qrcode-parser/-/qrcode-parser-2.1.3.tgz", + "integrity": "sha512-tyakoHUQXCjH1+RGiqxH3/6XqbQuXuSaW0CkUp1AlYT0+XA4ndG7bxxyyWpdnr0Z2Vuv0GRwgKSq6sOzNiQfog==", + "dependencies": { + "jsqr": "^1.4.0" + } + }, "node_modules/qrcode/node_modules/cliui": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz", diff --git a/package.json b/package.json index 3cddbc1..231db39 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "node-forge": "^1.3.1", "prettier": "^3.1.1", "qrcode": "^1.5.3", + "qrcode-parser": "^2.1.3", "qs": "^6.11.2", "rc-table": "^7.36.0", "react": "^18.2.0", diff --git a/src/pages/de_qrcode.tsx b/src/pages/de_qrcode.tsx new file mode 100644 index 0000000..c16444b --- /dev/null +++ b/src/pages/de_qrcode.tsx @@ -0,0 +1,166 @@ +import alertActions from '@/components/Alert'; +import MainContent from '@/components/MainContent'; +import ContentCopyIcon from '@mui/icons-material/ContentCopy'; +import { Box, Button, Stack } from '@mui/material'; +import QrcodeParse from 'qrcode-parser'; +import Table from 'rc-table'; +import { useState } from 'react'; +import { CopyToClipboard } from 'react-copy-to-clipboard'; + +const _C = () => { + const [list, setList] = useState< + { id: number; name: string; url?: string; error?: string }[] + >([]); + + const columns = [ + { + title: '图片', + dataIndex: 'name', + key: 'name', + width: 300, + render: (value: string) => ( + {value} + ), + }, + { + title: '解析值', + dataIndex: 'url', + key: 'url', + render: (value: string, record: any) => ( + + {!record.error ? ( + alertActions.success('复制成功')} + > + + {value} + + + + + + ) : ( + '无法识别出该图片中的二维码内容' + )} + + ), + }, + ]; + + const handleClick = () => { + const fileInput = document.getElementById('fileInput'); + if (fileInput) { + fileInput.click(); + } + }; + + const upload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + const url = URL.createObjectURL(file); + QrcodeParse(url) + .then((res: any) => { + setList([ + { name: file.name, url: res, id: (Math.random() * 10e8) | 0 }, + ...list, + ]); + }) + .catch((err) => { + setList([ + { + name: file.name, + error: String(err), + id: (Math.random() * 10e8) | 0, + }, + ...list, + ]); + }); + } + }; + + return ( + + + + + + 暂无数据 + + } + /> + + + ); +}; + +export default _C; diff --git a/src/pages/img_conversion.tsx b/src/pages/img_conversion.tsx index d379f45..0d721eb 100644 --- a/src/pages/img_conversion.tsx +++ b/src/pages/img_conversion.tsx @@ -343,26 +343,22 @@ const _C = () => { style={{ display: 'none' }} onChange={saveFile} /> - -
- 暂无数据 - - } - /> - +
+ 暂无数据 + + } + />