docs: cleanup & add PDF QR code extractor example

xseman · Jan 4, 2025 · ed9c7c6 · ed9c7c6
1 parent 00e7607
commit ed9c7c6
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 2,120 deletions.
diff --git a/docs/bysquare.xsd b/docs/bysquare.xsd
diff --git a/docs/examples/index.html b/docs/examples/index.html
diff --git a/docs/examples/pdf/index.html b/docs/examples/pdf/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>PDF QR code extract</title>
+	</head>
+	<body>
+		<h1>PDF QR code extract</h1>
+		<div id="app"></div>
+
+		<script type="module" src="index.js"></script>
+	</body>
+</html>
diff --git a/docs/examples/pdf/index.js b/docs/examples/pdf/index.js
@@ -0,0 +1,87 @@
+import { decode } from "https://esm.sh/bysquare@latest";
+import jsQR from "https://esm.sh/jsqr@latest";
+import {
+	getDocument,
+	GlobalWorkerOptions,
+} from "https://esm.sh/pdfjs-dist@latest";
+
+GlobalWorkerOptions.workerSrc = "https://esm.sh/pdfjs-dist@latest/build/pdf.worker.js";
+
+class PDFQRExtractor {
+	constructor(element) {
+		this.appElement = element;
+		this._createUI();
+		this.fileInput.addEventListener("change", this._handleFileChange);
+	}
+
+	_createUI() {
+		this.fileInput = document.createElement("input");
+		this.fileInput.type = "file";
+		this.fileInput.id = "fileInput";
+		this.fileInput.accept = "application/pdf";
+
+		this.outputElement = document.createElement("div");
+		this.outputElement.id = "output";
+
+		this.appElement.appendChild(this.fileInput);
+		this.appElement.appendChild(this.outputElement);
+	}
+
+	_handleFileChange = async (event) => {
+		const file = event.target.files[0];
+
+		if (!file) {
+			this._renderOutputData({ error: "No file selected." });
+			return;
+		}
+
+		const pdfBuffer = await this._readFileToArrayBuffer(file);
+		const pdfDocument = await getDocument(pdfBuffer).promise;
+		const page = await pdfDocument.getPage(1);
+
+		const viewport = page.getViewport({ scale: 1.5 });
+		const canvas = document.createElement("canvas");
+		const context = canvas.getContext("2d");
+
+		canvas.width = viewport.width;
+		canvas.height = viewport.height;
+
+		await page.render({
+			canvasContext: context,
+			viewport: viewport,
+		}).promise;
+
+		const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+		const qrCode = jsQR(imageData.data, canvas.width, canvas.height);
+
+		if (!qrCode) {
+			this._renderOutputData({ error: "No QR Code found." });
+			return;
+		}
+
+		console.log("QR Code data:", qrCode.data);
+
+		const parsedData = decode(qrCode.data);
+		console.log("Parsed data:", parsedData);
+
+		this._renderOutputData(parsedData);
+	};
+
+	_readFileToArrayBuffer(file) {
+		return new Promise((resolve, reject) => {
+			const fileReader = new FileReader();
+			fileReader.onload = () => resolve(new Uint8Array(fileReader.result));
+			fileReader.onerror = reject;
+			fileReader.readAsArrayBuffer(file);
+		});
+	}
+
+	_renderOutputData(data) {
+		this.outputElement.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
+	}
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+	const appElement = document.querySelector("#app");
+	new PDFQRExtractor(appElement);
+});
diff --git a/docs/examples/web/basic/index.html → docs/examples/web/native/index.html b/docs/examples/web/basic/index.html → docs/examples/web/native/index.html
diff --git a/docs/examples/web/basic/index.js → docs/examples/web/native/index.js b/docs/examples/web/basic/index.js → docs/examples/web/native/index.js
diff --git a/docs/index.html b/docs/index.html
@@ -7,8 +7,23 @@
 	<body>
 		<h1>Docs</h1>
 		<ul>
-			<li><a href="specification_v1.1.0.pdf">specification</a></li>
-			<li><a href="examples/">examples</a></li>
+			<li>
+				<a
+					href="https://www.sbaonline.sk/wp-content/uploads/2020/03/pay-by-square-specifications-1_1_0.pdf"
+				>specification</a>
+			</li>
+			<li>
+				<a href="https://bsqr.co/schema/">xsd schema</a>
+			</li>
+		</ul>
+
+		<h1>Examples</h1>
+
+		<ul>
+			<li><a href="examples/pdf/">PDF QR code extract</a></li>
+			<li><a href="examples/web/native/">native js</a></li>
+			<li><a href="examples/web/lit/">lit.js</a></li>
+			<li><a href="examples/web/preact/">preact.js</a></li>
 		</ul>
 	</body>
 </html>
diff --git a/docs/specification_v1.1.0.pdf b/docs/specification_v1.1.0.pdf