Render QR code with SVG, not canvas
This commit is contained in:
parent
7486312e4e
commit
eba8d8d4b8
4 changed files with 24 additions and 50 deletions
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue