fix: 生成不可识别二维码给出提示

chaitin · Jan 10, 2024 · a6eb3eb · a6eb3eb
1 parent 0565919
commit a6eb3eb
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/pages/generate_qrcode.tsx b/src/pages/generate_qrcode.tsx
@@ -12,6 +12,7 @@ import {
  TextField,
 } from '@mui/material';
 import QRCode, { QRCodeErrorCorrectionLevel } from 'qrcode';
+import QrcodeParse from 'qrcode-parser';
 import { useEffect, useState } from 'react';
 
 const OriginTypes = [
@@ -78,6 +79,7 @@ const _C = () => {
  const download = () => {
  const qrcodeCanvas = document.getElementById('qrcode') as HTMLCanvasElement;
  const url = qrcodeCanvas?.toDataURL();
+
  const a = document.createElement('a');
  a.href = url;
  a.download = 'qrcode.png';
@@ -285,6 +287,11 @@ const _C = () => {
  (options.width! / 4) | 0
  );
  }
+
+ const qrcodeUrl = qrcodeCanvas.toDataURL();
+ QrcodeParse(qrcodeUrl)
+ .then(() => setError(''))
+ .catch(() => setError('可能无法识别该图片中的二维码内容'));
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [qrcodeData]);
@@ -337,7 +344,7 @@ const _C = () => {
  textarea: { height: '100% !important' },
  }}
  value={text}
- rows={5}
+ rows={4}
  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
  setText(event.target.value)
  }
@@ -376,9 +383,6 @@ const _C = () => {
  />
  </Box>
  )}
- {error && (
- <Box sx={{ color: 'error.main', fontSize: '12px' }}>{error}</Box>
- )}
  <Button
  variant='contained'
  sx={{ borderRadius: '4px' }}
@@ -559,6 +563,11 @@ const _C = () => {
  height='400px'
  ></Box>
  </Box>
+ {error && (
+ <Box sx={{ color: 'error.main', fontSize: '12px', mt: 2 }}>
+ {error}
+ </Box>
+ )}
  {!!qrcodeData ? (
  <Stack direction='column' spacing={2} sx={{ mt: 2 }}>
  <Box