สร้างคิวอาร์โค้ดที่มีโลโก้ตรงกลาง

bysemicon -
0

 


แบบกรอบเหลี่ยม

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code with Logo and White Background</title>
</head>
<body>
    <!-- Canvas to draw QR Code with Logo -->
    <canvas id="qrCanvas"></canvas>


    <!-- QRCode.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script>
        // Function to generate QR code with logo and white background
        function generateQRCodeWithLogo(text = 'https://example.com', logoUrl = 'https://your-logo-url.com/logo.png') {
            const canvas = document.getElementById('qrCanvas');
            const context = canvas.getContext('2d');
           
            // Set the size of the canvas
            const qrSize = 256;  // Size of QR code
            const logoSize = 64; // Size of the logo
            const logoPadding = 3; // Padding around the logo for white background
            const logoBackgroundSize = logoSize + logoPadding * 2; // Size of the logo background
            canvas.width = qrSize;
            canvas.height = qrSize;

            // Create a QR code and draw it on the canvas
            const qrCode = new QRCode(document.createElement('div'), {
                text: text,
                width: qrSize,
                height: qrSize,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H // Higher error correction level
            });

            // Draw QR code on the canvas
            const qrImage = new Image();
            qrImage.src = qrCode._el.querySelector('canvas').toDataURL('image/png');
            qrImage.onload = function() {
                context.drawImage(qrImage, 0, 0, qrSize, qrSize);

                // Draw white background for logo
                const logoX = (qrSize - logoBackgroundSize) / 2;
                const logoY = (qrSize - logoBackgroundSize) / 2;
                context.fillStyle = '#ffffff'; // Set fill color to white
                context.fillRect(logoX, logoY, logoBackgroundSize, logoBackgroundSize);

                // Draw logo in the center of the QR code
                const logoImage = new Image();
                logoImage.src = logoUrl;  // URL of the logo image
                logoImage.onload = function() {
                    const logoX = (qrSize - logoSize) / 2;
                    const logoY = (qrSize - logoSize) / 2;
                    context.drawImage(logoImage, logoX, logoY, logoSize, logoSize);
                };
            };
        }

        // Call the function to generate the QR code with logo and white background
        generateQRCodeWithLogo(
            'https://guruchian.blogspot.com/',  // Text/URL to encode in QR code
            'https://semicon.github.io/img/logo2small.png' // URL of the logo
        );
    </script>
</body>
</html>


แบบกรอบกลม


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code with Circular Logo Background</title>
</head>
<body>
    <!-- Canvas to draw QR Code with Logo -->
    <canvas id="qrCanvas"></canvas>

    <!-- QRCode.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

    <script>
        // Function to generate QR code with logo and circular white background
        function generateQRCodeWithLogo(text = 'https://example.com', logoUrl = 'https://your-logo-url.com/logo.png') {
            const canvas = document.getElementById('qrCanvas');
            const context = canvas.getContext('2d');
           
            // Set the size of the canvas
            const qrSize = 256;  // Size of QR code
            const logoSize = 64; // Size of the logo
            const logoPadding = 5; // Padding around the logo for white circular background
            const logoBackgroundRadius = (logoSize + logoPadding * 2) / 2; // Radius of the logo background
            canvas.width = qrSize;
            canvas.height = qrSize;

            // Create a QR code and draw it on the canvas
            const qrCode = new QRCode(document.createElement('div'), {
                text: text,
                width: qrSize,
                height: qrSize,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H // Higher error correction level
            });

            // Draw QR code on the canvas
            const qrImage = new Image();
            qrImage.src = qrCode._el.querySelector('canvas').toDataURL('image/png');
            qrImage.onload = function() {
                context.drawImage(qrImage, 0, 0, qrSize, qrSize);

                // Draw white circular background for logo
                const centerX = qrSize / 2;  // X coordinate of center of the circle
                const centerY = qrSize / 2;  // Y coordinate of center of the circle
                context.fillStyle = '#ffffff'; // Set fill color to white
                context.beginPath();
                context.arc(centerX, centerY, logoBackgroundRadius, 0, Math.PI * 2, true); // Draw circle
                context.fill();

                // Draw logo in the center of the QR code
                const logoImage = new Image();
                logoImage.src = logoUrl;  // URL of the logo image
                logoImage.onload = function() {
                    const logoX = (qrSize - logoSize) / 2;
                    const logoY = (qrSize - logoSize) / 2;
                    context.drawImage(logoImage, logoX, logoY, logoSize, logoSize);
                };
            };
        }

        // Call the function to generate the QR code with logo and circular white background
        generateQRCodeWithLogo(
            'https://guruchian.blogspot.com/',  // Text/URL to encode in QR code
            'https://semicon.github.io/img/logo2small.png' // URL of the logo
        );
    </script>
</body>
</html>


ขนาดของคิวอาร์โค้ดและโลโก้

  • กำหนดขนาดของคิวอาร์โค้ดด้วยตัวแปร qrSize (เช่น 256x256 พิกเซล)
  • กำหนดขนาดของโลโก้ด้วยตัวแปร logoSize (เช่น 64x64 พิกเซล).

การสร้างคิวอาร์โค้ด

ใช้ไลบรารี QRCode.js เพื่อสร้างคิวอาร์โค้ดบน <canvas>

การเพิ่มโลโก้

ใช้ฟังก์ชัน drawImage() เพื่อวาดโลโก้ที่อยู่ตรงกลางของคิวอาร์โค้ด โดยคำนวณตำแหน่งโลโก้ให้อยู่ที่จุดกึ่งกลาง

การโหลดรูปโลโก้

โหลดภาพโลโก้จาก URL ที่กำหนด และเมื่อรูปภาพโหลดเสร็จ ให้ทำการวาดลงใน <canvas>

การเพิ่มพื้นหลังสีขาวรอบโลโก้

  • ใช้ context.fillRect() เพื่อวาดสี่เหลี่ยมสีขาว (พื้นหลัง) ที่มีขนาดใหญ่กว่าโลโก้ โดยเพิ่มค่าขอบ logoPadding รอบโลโก้
  • ตัวแปร logoPadding เป็นตัวกำหนดขนาดของขอบพื้นหลังสีขาวที่ล้อมรอบโลโก้

การวาดวงกลม
  • ใช้ context.arc(centerX, centerY, logoBackgroundRadius, 0, Math.PI * 2) เพื่อวาดวงกลม โดย centerX และ centerY คือตำแหน่งศูนย์กลางของวงกลม และ logoBackgroundRadius คือรัศมีของวงกลม (กำหนดโดยขนาดของโลโก้และการ padding ที่เพิ่มรอบๆ โลโก้)

ตำแหน่งของพื้นหลังและโลโก้

  • การวาดพื้นหลังสีขาวจะใช้ขนาดที่ใหญ่กว่าโลโก้เล็กน้อย และจัดให้อยู่ตรงกลางของคิวอาร์โค้ด
  • หลังจากวาดพื้นหลังสีขาวแล้ว เราจะวาดโลโก้ลงบนพื้นหลังนี้อีกทีหนึ่ง

ข้อควรทราบ

  • โลโก้ที่อยู่ในคิวอาร์โค้ดอาจทำให้บางส่วนของคิวอาร์โค้ดถูกบังได้ ดังนั้นควรใช้ระดับการแก้ไขข้อผิดพลาด (error correction level) ของคิวอาร์โค้ดที่สูงขึ้น เช่น QRCode.CorrectLevel.H เพื่อให้คิวอาร์โค้ดสามารถสแกนได้ถึงแม้จะมีโลโก้อยู่ตรงกลาง
  • คุณสามารถปรับขนาดคิวอาร์โค้ดและโลโก้ตามความเหมาะสม และใช้ URL ของโลโก้ที่คุณต้องการนำมาใช้



แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า