I want to add a 150 by 100 centered cover image that is automatically part of the qr codes when creating the qr codes. How can I do that. I have the qr code maker in a CodePen. Thanks!
I simply edited the qr code maker in a somewhat unique way, and when testing, the qr code maker is running. However, I currently don’t know to include a centered custom cover image in the qr code images. Thanks!
`<div class="qrcode-form">
<p><b>NON TRACKING<br>QR CODE MAKER</b></p>
<form>
<input type="url" id="website" name="website" placeholder="https://YourURL.com" autocomplete="off" required />
<button type="button" onclick="generateQRCode()">
Generate QR Code
</button>
</form>
<div id="qrcode-container">
<img style="margin-top: 30px;" class="bounce animated infinite" src="Q-R-Arrow-Down.svg" height="32" alt="Scroll Down" title="Scroll Down">
<h4 style="color: #000">DEFAULT COLOR 250 By 250</h4>
<div id="qrcode" class="qrcode"></div>
<img style="margin-top: 30px;" class="bounce animated infinite" src="Q-R-Arrow-Down.svg" height="32" alt="Scroll Down" title="Scroll Down">
<h4 style="color: #4169E1">ROYAL BLUE 250 By 250</h4>
<div id="qrcode-royal-blue" class="qrcode cover-image"></div>
<img style="margin-top: 30px;" class="bounce animated infinite" src="Q-R-Arrow-Down.svg" height="32" alt="Scroll Down" title="Scroll Down">
<h4 style="color: #663399">ROYAL PURPLE 250 By 250</h4>
<div id="qrcode-royal-purple" class="qrcode"></div>
<img style="margin-top: 30px;" class="bounce animated infinite" src="Q-R-Arrow-Down.svg" height="32" alt="Scroll Down" title="Scroll Down">
<h4 style="color: #228B22">FOREST GREEN 250 By 250</h4>
<div id="qrcode-forest-green" class="qrcode"></div>
<img style="margin-top: 30px;" class="bounce animated infinite" src="Q-R-Arrow-Down.svg" height="32" alt="Scroll Down" title="Scroll Down">
<h4 style="color: #A52A2A">BROWN 250 By 250</h4>
<div id="qrcode-brown" class="qrcode"></div>
</div> </div>
<div class="qrcode-info">1) Enter https://DomainName.com, TEL: 777-777-777, SMS: 777-777-7777, Or TEXT; 2) Click The Generate QR Code Button; 3) Scroll Down To Pick Your Preferred Color;
4) DownLoad The QR Code PNG Image.<br><br>The ROYAL QR Code Maker DOESN'T Use Any Trackers!</div>
<script>
function generateQRCode() {
let website = document.getElementById("website").value;
if (website) {
let qrcodeContainer = document.getElementById("qrcode");
qrcodeContainer.innerHTML = "";
new QRCode(qrcodeContainer, website);
/*With Some CSS*/
let qrcodeContainer2 = document.getElementById("qrcode-royal-blue");
qrcodeContainer2.innerHTML = "";
new QRCode(qrcodeContainer2, {
text: website,
width: 250,
height: 250,
colorDark: "#4169E1",
colorLight: "#FFF",
correctLevel: QRCode.CorrectLevel.H
});
/*With Some CSS*/
let qrcodeContainer3 = document.getElementById("qrcode-royal-purple");
qrcodeContainer3.innerHTML = "";
new QRCode(qrcodeContainer3, {
text: website,
width: 250,
height: 250,
colorDark: "#663399",
colorLight: "#FFF",
correctLevel: QRCode.CorrectLevel.H
});
/*With Some CSS*/
let qrcodeContainer4 = document.getElementById("qrcode-forest-green");
qrcodeContainer4.innerHTML = "";
new QRCode(qrcodeContainer4, {
text: website,
width: 250,
height: 250,
colorDark: "#228B22",
colorLight: "#FFF",
correctLevel: QRCode.CorrectLevel.H
});
/*With Some CSS*/
let qrcodeContainer5 = document.getElementById("qrcode-brown");
qrcodeContainer5.innerHTML = "";
new QRCode(qrcodeContainer5, {
text: website,
width: 250,
height: 250,
colorDark: "#A52A2A",
colorLight: "#FFF",
correctLevel: QRCode.CorrectLevel.H
});
document.getElementById("qrcode-container").style.display = "block";
} else {
alert("Please Enter a VALID URL, PHONE NUMBER, SMS NUMBER, Or TEXT!");
}
}
</script>`