@xbibzlibrary/qrweb

v2.0.0

Published

3 months ago

QR Code Generator and Decoder Library from Xbibz Official 777

0High
0Medium
0Low

xbibzbackup

qrcode qr-code generator decoder javascript js xbibz

📱 QR Code Generator & Decoder Library

QR Code Library

🚀 Powerful QR Code Generation & Decoding Library

Demo • Installation • Documentation • Examples

✨ Features

🎨 Generator Features

✅ Multiple size options
✅ Custom colors (dark/light)
✅ Error correction levels
✅ SVG & Canvas support
✅ Responsive design
✅ Mobile optimized

🔍 Decoder Features

✅ Fast QR code scanning
✅ Multiple format support
✅ High accuracy detection
✅ Error correction
✅ Data extraction
✅ Image processing

📦 Installation

CDN (Recommended)

<!-- QR Code Generator -->
<script src="https://cdn.jsdelivr.net/npm/@xbibzlibrary/[email protected]/qrcodegenerator.js"></script>

<!-- QR Code Decoder -->
<script src="https://cdn.jsdelivr.net/npm/@xbibzlibrary/[email protected]/qrcodedecoder.js"></script>

NPM

npm install @xbibzlibrary/qrcode

🎯 Quick Start

🖼️ Generating QR Codes

// Create QR Code
const qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "https://github.com/XbibzOfficial777",
    width: 256,
    height: 256,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

const qrcode = new QRCode("qrcode-container", {
    text: "Hello World!",
    width: 300,
    height: 300,
    colorDark: "#2563eb",
    colorLight: "#f0f9ff",
    correctLevel: QRCode.CorrectLevel.M
});

🔎 Decoding QR Codes

const img = document.getElementById('qr-image');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);

if (code) {
    console.log("QR Code detected:", code.data);
}

📖 Documentation

🎨 QRCode Constructor Options

🔍 Error Correction Levels

QRCode.CorrectLevel.L  // ~7% error recovery
QRCode.CorrectLevel.M  // ~15% error recovery
QRCode.CorrectLevel.Q  // ~25% error recovery
QRCode.CorrectLevel.H  // ~30% error recovery

💡 Examples

Example 1: Dynamic QR Code

<!DOCTYPE html>
<html>
<head>
    <style>
        .qr-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            padding: 40px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px;
        }
        
        #qrcode {
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        input {
            padding: 12px 20px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            width: 300px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="qr-container">
        <input type="text" id="text" placeholder="Enter text or URL...">
        <div id="qrcode"></div>
    </div>

    <script src="qrcodedecoder.js"></script>
    <script>
        let qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 256,
            height: 256,
            colorDark: "#2563eb",
            colorLight: "#ffffff"
        });

        document.getElementById('text').addEventListener('input', function(e) {
            qrcode.clear();
            qrcode.makeCode(e.target.value);
        });
    </script>
</body>
</html>

Example 2: QR Code Scanner

<!DOCTYPE html>
<html>
<head>
    <style>
        .scanner-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 30px;
            background: #1e293b;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        video {
            width: 100%;
            border-radius: 15px;
            margin-bottom: 20px;
        }
        
        .result {
            padding: 20px;
            background: #10b981;
            color: white;
            border-radius: 10px;
            margin-top: 20px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="scanner-container">
        <video id="video" autoplay></video>
        <canvas id="canvas" style="display:none;"></canvas>
        <div id="result" class="result" style="display:none;"></div>
    </div>

    <script src="qrcodegenerator.js"></script>
    <script>
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const result = document.getElementById('result');
        const ctx = canvas.getContext('2d');

        navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
            .then(stream => {
                video.srcObject = stream;
                video.play();
                scanQRCode();
            });

        function scanQRCode() {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            ctx.drawImage(video, 0, 0);
            
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const code = jsQR(imageData.data, imageData.width, imageData.height);
            
            if (code) {
                result.style.display = 'block';
                result.innerHTML = `<strong>✅ Detected:</strong><br>${code.data}`;
            }
            
            requestAnimationFrame(scanQRCode);
        }
    </script>
</body>
</html>

🎨 Advanced Customization

Gradient QR Codes

const qrcode = new QRCode("qrcode", {
    text: "https://xbibz.com",
    width: 400,
    height: 400,
    colorDark: "#6366f1",
    colorLight: "#f0f9ff",
    correctLevel: QRCode.CorrectLevel.H
});

// Add custom styles after generation
const svg = document.querySelector('#qrcode svg');
svg.style.filter = 'drop-shadow(0 4px 8px rgba(99, 102, 241, 0.5))';

🛠️ API Reference

Methods

`makeCode(text)`

Generate new QR code with specified text

qrcode.makeCode("New content");

`clear()`

Clear existing QR code

qrcode.clear();

`makeImage()`

Convert canvas to image (if supported)

qrcode.makeImage();

🌟 Use Cases

🤝 Contributing

Contributions are welcome! Feel free to:

🐛 Report bugs
💡 Suggest features
🔧 Submit pull requests

📞 Connect With Me

💖 Support My Work

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Xbibz Official

⭐ Star this repo if you find it helpful!

 ██████╗ ██████╗      ██████╗ ██████╗ ██████╗ ███████╗
██╔═══██╗██╔══██╗    ██╔════╝██╔═══██╗██╔══██╗██╔════╝
██║   ██║██████╔╝    ██║     ██║   ██║██║  ██║█████╗  
██║▄▄ ██║██╔══██╗    ██║     ██║   ██║██║  ██║██╔══╝  
╚██████╔╝██║  ██║    ╚██████╗╚██████╔╝██████╔╝███████╗
 ╚══▀▀═╝ ╚═╝  ╚═╝     ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝