From 4daf15f26b7ec93b1a1ce7a18d7a018b7d105b68 Mon Sep 17 00:00:00 2001 From: xingyu Date: Wed, 9 Aug 2023 20:00:52 +0800 Subject: [PATCH] perf: remove qrcode use antdv --- build/vite/optimize.ts | 1 - package.json | 2 - src/components/Qrcode/index.ts | 5 - src/components/Qrcode/src/Qrcode.vue | 118 ------------------------ src/components/Qrcode/src/drawCanvas.ts | 31 ------- src/components/Qrcode/src/drawLogo.ts | 85 ----------------- src/components/Qrcode/src/qrcodePlus.ts | 5 - src/components/Qrcode/src/toCanvas.ts | 11 --- src/components/Qrcode/src/typing.ts | 38 -------- src/views/base/login/QrCodeForm.vue | 12 ++- 10 files changed, 9 insertions(+), 299 deletions(-) delete mode 100644 src/components/Qrcode/index.ts delete mode 100644 src/components/Qrcode/src/Qrcode.vue delete mode 100644 src/components/Qrcode/src/drawCanvas.ts delete mode 100644 src/components/Qrcode/src/drawLogo.ts delete mode 100644 src/components/Qrcode/src/qrcodePlus.ts delete mode 100644 src/components/Qrcode/src/toCanvas.ts delete mode 100644 src/components/Qrcode/src/typing.ts diff --git a/build/vite/optimize.ts b/build/vite/optimize.ts index 7310ddbf..335b3595 100644 --- a/build/vite/optimize.ts +++ b/build/vite/optimize.ts @@ -5,7 +5,6 @@ const include = [ 'axios', 'pinia', 'dayjs', - 'qrcode', 'echarts', 'cropperjs', 'crypto-js', diff --git a/package.json b/package.json index 26c72989..10e88a65 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,6 @@ "path-to-regexp": "^6.2.1", "pinia": "^2.1.6", "print-js": "^1.6.0", - "qrcode": "^1.5.3", "qs": "^6.11.2", "resize-observer-polyfill": "^1.5.1", "sortablejs": "^1.15.0", @@ -92,7 +91,6 @@ "@types/lodash-es": "^4.17.8", "@types/node": "^20.4.0", "@types/nprogress": "^0.2.0", - "@types/qrcode": "^1.5.1", "@types/qs": "^6.9.7", "@types/sortablejs": "^1.15.1", "@typescript-eslint/eslint-plugin": "^6.3.0", diff --git a/src/components/Qrcode/index.ts b/src/components/Qrcode/index.ts deleted file mode 100644 index cac968a8..00000000 --- a/src/components/Qrcode/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import qrCode from './src/Qrcode.vue' -import { withInstall } from '@/utils' - -export const QrCode = withInstall(qrCode) -export * from './src/typing' diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue deleted file mode 100644 index 94e629bf..00000000 --- a/src/components/Qrcode/src/Qrcode.vue +++ /dev/null @@ -1,118 +0,0 @@ - - - diff --git a/src/components/Qrcode/src/drawCanvas.ts b/src/components/Qrcode/src/drawCanvas.ts deleted file mode 100644 index 9b5b14b2..00000000 --- a/src/components/Qrcode/src/drawCanvas.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { toCanvas } from 'qrcode' -import type { QRCodeRenderersOptions } from 'qrcode' -import { cloneDeep } from 'lodash-es' -import type { ContentType, RenderQrCodeParams } from './typing' - -export function renderQrCode({ canvas, content, width = 0, options: params = {} }: RenderQrCodeParams) { - const options = cloneDeep(params) - // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率 - options.errorCorrectionLevel = options.errorCorrectionLevel || getErrorCorrectionLevel(content) - - return getOriginWidth(content, options).then((_width: number) => { - options.scale = width === 0 ? undefined : (width / _width) * 4 - return toCanvas(canvas, content, options) - }) -} - -// 得到原QrCode的大小，以便缩放得到正确的QrCode大小 -function getOriginWidth(content: ContentType, options: QRCodeRenderersOptions) { - const _canvas = document.createElement('canvas') - return toCanvas(_canvas, content, options).then(() => _canvas.width) -} - -// 对于内容少的QrCode，增大容错率 -function getErrorCorrectionLevel(content: ContentType) { - if (content.length > 36) - return 'M' - else if (content.length > 16) - return 'Q' - else - return 'H' -} diff --git a/src/components/Qrcode/src/drawLogo.ts b/src/components/Qrcode/src/drawLogo.ts deleted file mode 100644 index a520b603..00000000 --- a/src/components/Qrcode/src/drawLogo.ts +++ /dev/null @@ -1,85 +0,0 @@ -import type { LogoType, RenderQrCodeParams } from './typing' -import { isString } from '@/utils/is' - -export function drawLogo({ canvas, logo }: RenderQrCodeParams) { - if (!logo) { - return new Promise((resolve) => { - resolve((canvas as HTMLCanvasElement).toDataURL()) - }) - } - const canvasWidth = (canvas as HTMLCanvasElement).width - const { logoSize = 0.15, bgColor = '#ffffff', borderSize = 0.05, crossOrigin, borderRadius = 8, logoRadius = 0 } = logo as LogoType - - const logoSrc: string = isString(logo) ? logo : logo.src - const logoWidth = canvasWidth * logoSize - const logoXY = (canvasWidth * (1 - logoSize)) / 2 - const logoBgWidth = canvasWidth * (logoSize + borderSize) - const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2 - - const ctx = canvas.getContext('2d') - if (!ctx) - return - - // logo 底色 - canvasRoundRect(ctx)(logoBgXY, logoBgXY, logoBgWidth, logoBgWidth, borderRadius) - ctx.fillStyle = bgColor - ctx.fill() - - // logo - const image = new Image() - if (crossOrigin || logoRadius) - image.setAttribute('crossOrigin', crossOrigin || 'anonymous') - - image.src = logoSrc - - // 使用image绘制可以避免某些跨域情况 - const drawLogoWithImage = (image: CanvasImageSource) => { - ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth) - } - - // 使用canvas绘制以获得更多的功能 - const drawLogoWithCanvas = (image: HTMLImageElement) => { - const canvasImage = document.createElement('canvas') - canvasImage.width = logoXY + logoWidth - canvasImage.height = logoXY + logoWidth - const imageCanvas = canvasImage.getContext('2d') - if (!imageCanvas || !ctx) - return - imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth) - - canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius) - if (!ctx) - return - const fillStyle = ctx.createPattern(canvasImage, 'no-repeat') - if (fillStyle) { - ctx.fillStyle = fillStyle - ctx.fill() - } - } - - // 将 logo绘制到 canvas上 - return new Promise((resolve) => { - image.onload = () => { - logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image) - resolve((canvas as HTMLCanvasElement).toDataURL()) - } - }) -} - -// copy来的方法，用于绘制圆角 -function canvasRoundRect(ctx: CanvasRenderingContext2D) { - return (x: number, y: number, w: number, h: number, r: number) => { - const minSize = Math.min(w, h) - if (r > minSize / 2) - r = minSize / 2 - - ctx.beginPath() - ctx.moveTo(x + r, y) - ctx.arcTo(x + w, y, x + w, y + h, r) - ctx.arcTo(x + w, y + h, x, y + h, r) - ctx.arcTo(x, y + h, x, y, r) - ctx.arcTo(x, y, x + w, y, r) - ctx.closePath() - return ctx - } -} diff --git a/src/components/Qrcode/src/qrcodePlus.ts b/src/components/Qrcode/src/qrcodePlus.ts deleted file mode 100644 index aa4caf43..00000000 --- a/src/components/Qrcode/src/qrcodePlus.ts +++ /dev/null @@ -1,5 +0,0 @@ -// 参考 qr-code-with-logo 进行ts版本修改 -import { toCanvas } from './toCanvas' - -export * from './typing' -export { toCanvas } diff --git a/src/components/Qrcode/src/toCanvas.ts b/src/components/Qrcode/src/toCanvas.ts deleted file mode 100644 index 1b7260a3..00000000 --- a/src/components/Qrcode/src/toCanvas.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { renderQrCode } from './drawCanvas' -import { drawLogo } from './drawLogo' -import type { RenderQrCodeParams } from './typing' - -export function toCanvas(options: RenderQrCodeParams) { - return renderQrCode(options) - .then(() => { - return options - }) - .then(drawLogo) as Promise -} diff --git a/src/components/Qrcode/src/typing.ts b/src/components/Qrcode/src/typing.ts deleted file mode 100644 index 9ab7250b..00000000 --- a/src/components/Qrcode/src/typing.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { QRCodeRenderersOptions, QRCodeSegment } from 'qrcode' - -export type ContentType = string | QRCodeSegment[] - -export type { QRCodeRenderersOptions } - -export interface LogoType { - src: string - logoSize: number - borderColor: string - bgColor: string - borderSize: number - crossOrigin: string - borderRadius: number - logoRadius: number -} - -export interface RenderQrCodeParams { - canvas: any - content: ContentType - width?: number - options?: QRCodeRenderersOptions - logo?: LogoType | string - image?: HTMLImageElement - downloadName?: string - download?: boolean | Fn -} - -export type ToCanvasFn = (options: RenderQrCodeParams) => Promise - -export interface QrCodeActionType { - download: (fileName?: string) => void -} - -export interface QrcodeDoneEventParams { - url: string - ctx?: CanvasRenderingContext2D | null -} diff --git a/src/views/base/login/QrCodeForm.vue b/src/views/base/login/QrCodeForm.vue index 4e6cab74..8561f7ef 100644 --- a/src/views/base/login/QrCodeForm.vue +++ b/src/views/base/login/QrCodeForm.vue @@ -1,11 +1,12 @@