QR Code Detector Web Application: Detailed Report
Project Overview
This QR Code Detector web application is designed to detect QR codes in images using JavaScript and the jsQR library. It allows users to upload an image, and if a QR code is detected, the app displays both the QR code’s content and a bounding box around it in the image preview.
Key Features
- Efficient QR Code Detection: Uses the jsQR library, a fast and reliable QR code detection tool.
- User-Friendly Interface: Simple design with a centered layout and an intuitive upload button.
- Visual Feedback: Displays the detected QR code with a red bounding box to visually indicate the QR code area.
- Responsive Design: Works well across different devices and screen sizes.
- Error Handling: Provides feedback when no QR code is detected in the uploaded image.
Code Explanation
- HTML Structure:
- A hidden file input (
fileInput) allows users to upload images. - A button (
Upload Image) to trigger the file input. resultdiv shows messages and QR code content.- An
imgelement (imagePreview) displays the uploaded image, and a hidden canvas (canvas) is used for image processing.
- A hidden file input (
- CSS Styling:
- Basic styling for a clean, centered layout.
- Styles for
uploadButtonprovide hover effects to enhance interactivity.
- JavaScript Implementation:
- File Upload: The upload button triggers the hidden file input, and once an image is selected,
FileReaderloads it intoimagePreview. - QR Code Detection:
- Draws the uploaded image onto the canvas to process its pixel data.
- Passes the image data to jsQR for QR code detection.
- Result Display:
- If a QR code is detected, it is outlined with a red bounding box, and its content is displayed.
- If no QR code is found, a message informs the user.
- Bounding Box Drawing:
- Draws a red bounding box around the QR code location to give users visual feedback on the detected QR code area.
- File Upload: The upload button triggers the hidden file input, and once an image is selected,
Syntax / code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Detector</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js"></script>
<style>
/* CSS styles */
</style>
</head>
<body>
<div class="container">
<!-- HTML Structure -->
</div>
<script>
// JavaScript Implementation
</script>
</body>
</html>
My Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Detector</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jsQR.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#fileInput {
display: none;
}
#uploadButton {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-bottom: 20px;
}
#uploadButton:hover {
background-color: #2980b9;
}
#result {
margin-top: 20px;
font-weight: bold;
}
#imagePreview {
max-width: 100%;
max-height: 300px;
margin-top: 20px;
}
#canvas {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>QR Code Detector</h1>
<input type="file" id="fileInput" accept="image/*">
<button id="uploadButton">Upload Image</button>
<div id="result">Upload an image to check for a QR code.</div>
<img id="imagePreview">
<canvas id="canvas"></canvas>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
const result = document.getElementById('result');
const imagePreview = document.getElementById('imagePreview');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
uploadButton.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleImageUpload);
function handleImageUpload(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
imagePreview.src = event.target.result;
imagePreview.onload = detectQRCode;
}
reader.readAsDataURL(file);
}
}
function detectQRCode() {
canvas.width = imagePreview.naturalWidth;
canvas.height = imagePreview.naturalHeight;
ctx.drawImage(imagePreview, 0, 0, canvas.width, canvas.height);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
// Clear the previous result message
result.textContent = 'QR will be displayed in the "Red BOX" & If NOT then same image will be displayed';
// Draw the bounding box around the QR code
drawBoundingBox(code.location);
} else {
// Show default message if no QR code is found
result.textContent = 'QR will be displayed in the "Red BOX" & If NOT then same image will be displayed';
clearBoundingBox();
}
}
function drawBoundingBox(location) {
// Draw red box around QR code
ctx.strokeStyle = '#FF3B58';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(location.topLeftCorner.x, location.topLeftCorner.y);
ctx.lineTo(location.topRightCorner.x, location.topRightCorner.y);
ctx.lineTo(location.bottomRightCorner.x, location.bottomRightCorner.y);
ctx.lineTo(location.bottomLeftCorner.x, location.bottomLeftCorner.y);
ctx.lineTo(location.topLeftCorner.x, location.topLeftCorner.y);
ctx.stroke();
// Update the imagePreview with the new canvas image (with bounding box)
imagePreview.src = canvas.toDataURL();
}
function clearBoundingBox() {
// Redraw the original image without any red box
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(imagePreview, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
output:
Usage Instructions
- Save this code as an HTML file.
- Open it in a web browser.
- Click “Upload Image” and select an image containing a QR code.
- If a QR code is detected, its content is displayed, and a red bounding box appears around it. If not, a message informs you.
Future Enhancements
- Real-Time Camera Detection: Enable detection from live video input.
- Multi-QR Detection: Allow detection of multiple QR codes in one image.
- QR Code Generation: Add a feature to generate QR codes directly from the app.
SEO Recommendations
To optimize this page for SEO on CodeSpeedy:
- Set a Focus Keyphrase: For instance, “QR Code Detection JavaScript Web App.”
- Meta Description: Write a concise description summarizing the app.
- Keyword Distribution: Include keywords in the introduction, features, and usage sections.
Sample Meta Description:
“Discover how to build a QR Code Detector Web Application using JavaScript and jsQR. This app detects QR codes from images and displays the result with a bounding box.”