@nixjs23n6/qrcode-react
Version:
A React component to generate QRCode.
130 lines • 5.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.QRCode = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const qrcode_generator_1 = tslib_1.__importDefault(require("qrcode-generator"));
const QRCode = ({ value, ecLevel = 'M', enableCORS = false, size = 125, margin = 15, bgColor = '#FFFFFF', fgColor = '#000000', qrStyle = 'squares', imageSettings = { opacity: 1, height: 30, width: 30, image: '' }, className, }) => {
const canvasRef = react_1.default.useRef(null);
const utf16to8 = (str) => {
let out = '';
let i;
let c;
const len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if (c >= 0x0001 && c <= 0x007f) {
out += str.charAt(i);
}
else if (c > 0x07ff) {
out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
}
else {
out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
}
}
return out;
};
const drawPositioningPattern = (cellSize, offset, row, col, length, ctx) => {
for (let r = -1; r <= 7; r++) {
if (!(row + r <= -1 || length <= row + r)) {
for (let c = -1; c <= 7; c++) {
if ((!(col + c <= -1 || length <= col + c) && r >= 0 && r <= 6 && (c === 0 || c === 6)) ||
(c >= 0 && c <= 6 && (r === 0 || r === 6)) ||
(r >= 2 && r <= 4 && c >= 2 && c <= 4)) {
const w = Math.ceil((row + r + 1) * cellSize) - Math.floor((row + r) * cellSize);
const h = Math.ceil((col + c + 1) * cellSize) - Math.floor((col + c) * cellSize);
// eslint-disable-next-line no-param-reassign
ctx.fillStyle = fgColor;
ctx.fillRect(Math.round((row + r) * cellSize) + offset, Math.round((col + c) * cellSize) + offset, w, h);
}
}
}
}
};
const update = () => {
var _a;
const qrCode = (0, qrcode_generator_1.default)(0, ecLevel);
qrCode.addData(utf16to8(value));
qrCode.make();
if (canvasRef.current) {
const ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
const canvasSize = +size + 2 * +margin;
const length = qrCode.getModuleCount();
const cellSize = size / length;
const scale = window.devicePixelRatio || 1;
canvasRef.current.height = canvasSize * scale;
canvasRef.current.width = canvasSize * scale;
ctx.scale(scale, scale);
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, canvasSize, canvasSize);
const offset = +margin;
if (qrStyle === 'dots') {
ctx.fillStyle = fgColor;
const radius = cellSize / 2;
for (let row = 0; row < length; row++) {
for (let col = 0; col < length; col++) {
if (qrCode.isDark(row, col)) {
ctx.beginPath();
ctx.arc(Math.round(col * cellSize) + radius + offset, Math.round(row * cellSize) + radius + offset, (radius / 100) * 75, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
}
}
}
drawPositioningPattern(cellSize, offset, 0, 0, length, ctx);
drawPositioningPattern(cellSize, offset, length - 7, 0, length, ctx);
drawPositioningPattern(cellSize, offset, 0, length - 7, length, ctx);
}
else {
for (let row = 0; row < length; row++) {
for (let col = 0; col < length; col++) {
if (qrCode.isDark(row, col)) {
ctx.fillStyle = fgColor;
const w = Math.ceil((col + 1) * cellSize) - Math.floor(col * cellSize);
const h = Math.ceil((row + 1) * cellSize) - Math.floor(row * cellSize);
ctx.fillRect(Math.round(col * cellSize) + offset, Math.round(row * cellSize) + offset, w, h);
}
}
}
}
if (imageSettings && imageSettings.image) {
const { image, width, height, opacity } = imageSettings;
const img = new Image();
if (enableCORS) {
img.crossOrigin = 'Anonymous';
}
img.onload = () => {
const dwidth = width || size * 0.2;
const dheight = height || dwidth;
const dx = (size - dwidth) / 2;
const dy = (size - dheight) / 2;
img.width = dwidth;
img.height = dheight;
ctx.save();
ctx.globalAlpha = opacity;
ctx.drawImage(img, dx + offset, dy + offset, dwidth, dheight);
ctx.restore();
};
img.src = image;
}
}
};
react_1.default.useEffect(() => {
update();
}, []);
const s = +size + 2 * +margin;
return react_1.default.createElement('canvas', {
id: 'react-qrcode-logo',
height: s,
width: s,
style: { height: `${s}px`, width: `${s}px` },
ref: canvasRef,
className,
});
};
exports.QRCode = QRCode;
//# sourceMappingURL=index.js.map