Web Developers : Generate QR code with brand logo using HTML and JavaScript
Generate QR Code with Brand Logo Using HTML and JavaScript
In today’s digital age, QR codes have become a vital tool for businesses and marketers. They provide a quick and easy way for users to access websites, promotional content, or even contact information. This tutorial will guide you through the process of generating a QR code that incorporates your brand logo using just HTML and JavaScript.
What You Will Need
Before we dive into the code, here are the prerequisites:
- Basic knowledge of HTML and JavaScript.
- A code editor (such as Visual Studio Code, Sublime Text, or even Notepad).
- A live server or a local environment to test your code (you can use tools like Live Server in VS Code).
Setting Up Your HTML Structure
First, we need to create a simple HTML file where we can add our QR code generation functionality. Here’s a basic structure to get you started.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR Code Generator</title>
<link rel="stylesheet" href="styles.css"> <!-- Optional: Add your CSS file -->
</head>
<body>
<div id="qr-code-container">
<canvas id="qr-code"></canvas>
</div>
<input type="text" id="url-input" placeholder="Enter URL">
<input type="file" id="logo-input" accept="image/*">
<button id="generate-btn">Generate QR Code</button>
<script src="script.js"></script>
</body>
</html>
Adding JavaScript for QR Code Generation
Next, we will write the JavaScript code to handle the QR code generation. We’ll use a library called qrcode.js, which simplifies the process of creating QR codes. You can download it from GitHub or include it via a CDN.
Include qrcode.js
Add the following script tag in the <head> section of your HTML file to include the qrcode.js library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
Writing the QR Code Generation Logic
Now, create a script.js file and add the following code:
document.getElementById('generate-btn').addEventListener('click', function() {
const url = document.getElementById('url-input').value;
const logoFile = document.getElementById('logo-input').files[0];
if (!url) {
alert('Please enter a URL');
return;
}
const qrCanvas = document.getElementById('qr-code');
const qrCode = new QRCode(qrCanvas, {
text: url,
width: 256,
height: 256,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
if (logoFile) {
const reader = new FileReader();
reader.onload = function(event) {
const logoImg = new Image();
logoImg.onload = function() {
const context = qrCanvas.getContext('2d');
const logoSize = 64; // Size of the logo
const x = (qrCanvas.width / 2) - (logoSize / 2);
const y = (qrCanvas.height / 2) - (logoSize / 2);
context.drawImage(logoImg, x, y, logoSize, logoSize);
};
logoImg.src = event.target.result;
};
reader.readAsDataURL(logoFile);
}
});
Explanation of the Code
- Event Listener: We add a click event listener to the "Generate QR Code" button that will trigger the QR code generation process.
- URL Input Validation: Before generating the QR code, we check if the URL input field is not empty.
- QR Code Generation: Using the
QRCodeconstructor from theqrcode.jslibrary, we create a QR code with the specified URL and properties. - Logo Handling: If a logo is uploaded, we use a
FileReaderto read the image and draw it onto the QR code canvas after it has been generated.
Styling Your QR Code Container (Optional)
You can also add some CSS to center the QR code on the page and style the input fields. Here’s a simple CSS snippet you can add in a styles.css file:
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
}
#qr-code-container {
margin-bottom: 20px;
}
canvas {
border: 1px solid #000;
}
Testing Your QR Code Generator
- Open your HTML file in a web browser.
- Enter a URL in the input field.
- Upload your brand logo.
- Click the "Generate QR Code" button.
You should see a QR code generated with your logo at the center. You can scan it using any QR code scanner to verify that it correctly redirects to the entered URL.
Conclusion
Creating a QR code with a brand logo using HTML and JavaScript is a straightforward process that can enhance your marketing materials. With the help of the qrcode.js library, you can easily generate customized QR codes that reflect your brand identity.
Feel free to customize the styles and functionality to fit your needs, and happy coding! If you have any questions or run into any issues, don't hesitate to leave a comment below.
Connect with SkillBakery Studios
Explore more tutorials, tools, and resources:
Posted by SkillBakery Studios
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.
No comments:
Post a Comment