import { toCanvas } from 'qrcode'; import type { QRCodeRenderersOptions } from 'qrcode'; import { RenderQrCodeParams, ContentType } from './typing'; import { cloneDeep } from 'lodash-es'; export const 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'; } }