<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="d-grid justify-content-center mt-3">
<h3 class="text-center">Generate QRCode</h3>
<form class="row g-3" style=" max-width: 300px" onsubmit="generateQRCodeWithLogo()">
<div class="col-12 pt-3">
<label for="text_x" class="form-label">Text content</label>
<input type="text" class="form-control" id="text_x" placeholder="https://guruchian.blogspot.com/">
</div>
<div class="col-12">
<label for="logo" class="form-label">Logo URL</label>
<input type="url" class="form-control" id="logo" placeholder="https://semicon.github.io/img/logo2small.png">
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary mb-3">Generate QRCode</button>
</div>
</form>
<!-- Canvas to draw QR Code with Logo -->
<div class="mt-3 text-center">
<canvas id="qrCanvas"></canvas>
</div>
</div>
<!-- QRCode.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Function to generate QR code with logo and circular white background
function generateQRCodeWithLogo() {
event.preventDefault();
const text = document.getElementById('text_x').value
const logoUrl = document.getElementById('logo').value
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);
};
};
}
</script>
</body>
</html>
อ่านแล้ว ทำแล้ว แต่ไม่เวิร์ค สำเนาเลยดีกว่าไหม
ตอบลบ