371333802a
Implements client-side PDF417 barcode rendering with React component. Uses useEffect to prevent hydration mismatch by generating barcodes only after component mount. Integrates barcode display in location cards. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { BarcodeArray } from './pdf417';
|
|
|
|
/**
|
|
* Renders a PDF417 barcode matrix to a canvas and returns it as a data URL.
|
|
*
|
|
* This function creates an HTML canvas element, draws the barcode by iterating through
|
|
* the barcode matrix, and converts the canvas to a base64-encoded PNG data URL that
|
|
* can be used as an image source.
|
|
*
|
|
* @param barcodeMatrix - The barcode array generated by the PDF417 encoder containing
|
|
* the barcode matrix data with dimensions and binary code values
|
|
* @param blockWidth - The width in pixels of each individual barcode module (bar/space unit)
|
|
* @param blockHeight - The height in pixels of each individual barcode module (bar/space unit)
|
|
*
|
|
* @returns A data URL string (base64-encoded PNG) representing the rendered barcode image,
|
|
* suitable for use in an HTML img src attribute
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* const pdf417 = createPDF417();
|
|
* pdf417.init("Hello World", 2, 2);
|
|
* const barcodeArray = pdf417.getBarcodeArray();
|
|
* const dataUrl = renderBarcode(barcodeArray, 2, 4);
|
|
* // dataUrl can now be used: <img src={dataUrl} />
|
|
* ```
|
|
*/
|
|
export function renderBarcode(barcodeMatrix: BarcodeArray, blockWidth: number, blockHeight: number) {
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = barcodeMatrix.num_cols * blockWidth;
|
|
canvas.height = barcodeMatrix.num_rows * blockHeight;
|
|
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
|
|
|
let positionY = 0;
|
|
for (let row = 0; row < barcodeMatrix.num_rows; row += 1) {
|
|
let positionX = 0;
|
|
|
|
for (let col = 0; col < barcodeMatrix.num_cols; col += 1) {
|
|
if (barcodeMatrix.bcode[row][col] === 1) {
|
|
ctx.fillStyle = '#000';
|
|
} else {
|
|
ctx.fillStyle = '#FFF';
|
|
}
|
|
ctx.fillRect(positionX, positionY, blockWidth, blockHeight);
|
|
positionX += blockWidth;
|
|
}
|
|
positionY += blockHeight;
|
|
}
|
|
|
|
return canvas.toDataURL();
|
|
} |