Render QR code with SVG, not canvas

This commit is contained in:
Evan Hahn 2022-01-14 10:45:05 -06:00 committed by GitHub
parent 7486312e4e
commit eba8d8d4b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 50 deletions

View file

@ -2,53 +2,33 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type { ReactElement } from 'react';
import React, { useEffect, useMemo, useRef } from 'react';
import React, { useMemo, useRef } from 'react';
import qrcode from 'qrcode-generator';
import { getEnvironment, Environment } from '../environment';
import { strictAssert } from '../util/assert';
import { useDevicePixelRatio } from '../hooks/useDevicePixelRatio';
const AUTODETECT_TYPE_NUMBER = 0;
const ERROR_CORRECTION_LEVEL = 'L';
type PropsType = Readonly<{
'aria-label': string;
alt: string;
className?: string;
data: string;
size: number;
}>;
export function QrCode(props: PropsType): ReactElement {
// I don't think it's possible to destructure this.
// eslint-disable-next-line react/destructuring-assignment
const ariaLabel = props['aria-label'];
const { className, data, size } = props;
const { alt, className, data } = props;
const qrCode = useMemo(() => {
const result = qrcode(AUTODETECT_TYPE_NUMBER, ERROR_CORRECTION_LEVEL);
result.addData(data);
result.make();
return result;
const elRef = useRef<null | HTMLImageElement>(null);
const src = useMemo(() => {
const qrCode = qrcode(AUTODETECT_TYPE_NUMBER, ERROR_CORRECTION_LEVEL);
qrCode.addData(data);
qrCode.make();
const svgData = qrCode.createSvgTag({ cellSize: 1, margin: 0 });
return `data:image/svg+xml;utf8,${svgData}`;
}, [data]);
const canvasRef = useRef<null | HTMLCanvasElement>(null);
const dpi = useDevicePixelRatio();
const canvasSize = size * dpi;
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) {
return;
}
const context = canvas.getContext('2d');
strictAssert(context, 'Expected a canvas context');
const cellSize = canvasSize / qrCode.getModuleCount();
context.clearRect(0, 0, canvasSize, canvasSize);
qrCode.renderTo2dContext(context, cellSize);
}, [canvasSize, qrCode]);
// Add a development-only feature to copy a QR code to the clipboard by double-clicking.
// This can be used to quickly inspect the code, or to link this Desktop with an iOS
// simulator primary, which has a debug-only option to paste the linking URL instead of
@ -60,25 +40,23 @@ export function QrCode(props: PropsType): ReactElement {
navigator.clipboard.writeText(data);
const canvas = canvasRef.current;
if (!canvas) {
const el = elRef.current;
if (!el) {
return;
}
canvas.style.filter = 'brightness(50%)';
el.style.filter = 'brightness(50%)';
window.setTimeout(() => {
canvas.style.filter = '';
el.style.filter = '';
}, 150);
};
return (
<canvas
aria-label={ariaLabel}
<img
alt={alt}
className={className}
height={canvasSize}
ref={canvasRef}
style={{ width: size, height: size }}
width={canvasSize}
onDoubleClick={onDoubleClick}
ref={elRef}
src={src}
/>
);
}