async function processImage(originalImg, tryHarderStr = "true") {
// Create the main container
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
container.style.alignItems = 'center';
container.style.fontFamily = 'Arial, sans-serif';
container.style.width = '100%';
container.style.padding = '20px';
container.style.boxSizing = 'border-box';
// Image preview wrapper
const imgWrapper = document.createElement('div');
imgWrapper.style.maxWidth = '100%';
imgWrapper.style.marginBottom = '20px';
imgWrapper.style.textAlign = 'center';
// Render image to a canvas for preview purposes
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 800; // constrain display size to avoid giant images
let scale = 1;
if (originalImg.width > maxWidth) {
scale = maxWidth / originalImg.width;
}
canvas.width = originalImg.width * scale;
canvas.height = originalImg.height * scale;
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
canvas.style.maxWidth = '100%';
canvas.style.height = 'auto';
canvas.style.border = '1px solid #ccc';
canvas.style.borderRadius = '8px';
canvas.style.boxShadow = '0 4px 6px rgba(0,0,0,0.1)';
imgWrapper.appendChild(canvas);
// Results container
const resultBox = document.createElement('div');
resultBox.style.width = '100%';
resultBox.style.maxWidth = '800px';
resultBox.style.padding = '20px';
resultBox.style.borderRadius = '8px';
resultBox.style.backgroundColor = '#f8f9fa';
resultBox.style.border = '1px solid #e9ecef';
resultBox.style.boxSizing = 'border-box';
resultBox.innerHTML = '<div style="text-align:center; color:#6c757d; font-style:italic;">Scanning for QR codes and barcodes...</div>';
container.appendChild(imgWrapper);
container.appendChild(resultBox);
// Function to dynamically load the ZXing library as a fallback
async function loadZXing() {
if (window.ZXing) return window.ZXing;
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://unpkg.com/@zxing/library@0.19.1/umd/index.min.js';
script.onload = () => resolve(window.ZXing);
script.onerror = () => reject(new Error('Failed to load ZXing library. Check your internet connection.'));
document.head.appendChild(script);
});
}
// String formatting functions
function getFormatString(formatInt) {
if (!window.ZXing || !window.ZXing.BarcodeFormat) return "UNKNOWN";
const formats = window.ZXing.BarcodeFormat;
for (const key of Object.keys(formats)) {
if (formats[key] === formatInt) {
return key.toUpperCase();
}
}
return "UNKNOWN";
}
function formatRecognizedName(name) {
return String(name).toUpperCase().replace(/_/g, ' ');
}
function escapeHtml(unsafe) {
return (unsafe || "")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
try {
let results = [];
// 1. Scan using Native Web BarcodeDetector API (fastest, natively supported in Chrome/Edge/modern Safari)
if ('BarcodeDetector' in window) {
try {
const supportedFormats = await BarcodeDetector.getSupportedFormats();
if (supportedFormats.length > 0) {
const barcodeDetector = new BarcodeDetector({ formats: supportedFormats });
const detected = await barcodeDetector.detect(originalImg);
if (detected && detected.length > 0) {
results = detected.map(d => ({ format: d.format, text: d.rawValue }));
}
}
} catch (err) {
console.warn('Native BarcodeDetector encountered an issue, falling back to ZXing:', err);
}
}
// 2. Fallback to ZXing if native API failed, isn't supported, or didn't find anything
if (results.length === 0) {
try {
const zxing = await loadZXing();
const hints = new Map();
if (tryHarderStr === "true") {
hints.set(zxing.DecodeHintType.TRY_HARDER, true);
}
const codeReader = new zxing.BrowserMultiFormatReader(hints);
const result = await codeReader.decodeFromImageElement(originalImg);
if (result) {
results.push({ format: result.format, text: result.text });
}
} catch (err) {
// NotFoundException simply means no barcode was detected by ZXing. Catch other errors.
if (err && err.name !== 'NotFoundException') {
console.warn('ZXing threw an error during decode:', err);
}
}
}
// Display results
if (results.length > 0) {
let html = `<h3 style="margin-top:0; margin-bottom: 15px; color:#343a40; font-size: 1.2rem;">Scan Results</h3>`;
results.forEach((res, i) => {
const fmt = typeof res.format === 'number' ? getFormatString(res.format) : formatRecognizedName(res.format);
const borderBottom = i === results.length - 1 ? 'none' : '1px solid #dee2e6';
const val = escapeHtml(res.text);
html += `
<div style="padding-bottom: 15px; margin-bottom: 15px; border-bottom: ${borderBottom};">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #495057;">Format:</span>
<span style="display: inline-block; background: #e9ecef; padding: 2px 8px; border-radius: 12px; font-size: 0.85rem; color: #495057; margin-left: 8px;">${fmt}</span>
</div>
<div style="font-weight: 600; color: #495057; margin-bottom: 5px;">Value / Contents:</div>
<div style="background:#ffffff; border:1px solid #ced4da; padding:10px; border-radius:4px; font-family: monospace; white-space: pre-wrap; word-break: break-all; color: #212529;">${val}</div>
</div>
`;
});
resultBox.innerHTML = html;
} else {
resultBox.innerHTML = `<div style="text-align:center; color:#dc3545; font-weight:500;">No QR code or barcode found in this image.</div>`;
}
} catch (e) {
resultBox.innerHTML = `<div style="text-align:center; color:#dc3545; font-weight:500;">An error occurred while scanning: ${escapeHtml(e.message)}</div>`;
}
return container;
}This tool allows you to scan and extract information from QR codes and various types of barcodes within an image. By uploading a photo, the tool identifies the code format and retrieves the encoded text or data. It is useful for quickly accessing URLs from QR codes, decoding product information from barcodes, or retrieving digital identifiers from images without needing a physical scanner.