QR with Logo Generator – Free for Commercial Use
This is a simple QR Code generator. It allows you to add your brand’s logo to the QR Code to add a bit of customization. Simply enter the URL of your brand logo and the URL you wish the QR Code Generator and click the buttons. Assuming there are no errors each button will be enabled.
.code {
display: inline-block;
color: #ccc;
background-color: #666;
padding: 2px 10px;
border-radius: 2px;
}
#qrURL, #logoURL {
width:100%;
}
#canvas {
margin:0 auto;
}
Logo URL:
URL QR Code points to:
Update QR Logo and URL Preview Your QR Code Download Your QR Code
var logoURL;
var qrURL;
document.getElementById("disableGenerate").disabled = true;
document.getElementById("disableDownload").disabled = true;
function updateURLs() {
logoURL = document.getElementById('logoURL').value;
qrURL = document.getElementById('qrURL').value;
if(logoURL === '' || qrURL === '') {
return alert("Fill in Both URL Fields");
}
if(logoURL.substring(0, 7) !== 'http://' && logoURL.substring(0, 8) !== 'https://') {
logoURL = '//'+logoURL;
}
document.getElementById("disableGenerate").disabled = false;
}
function generateQR () {
console.log (logoURL);
console.log (qrURL);
window.qrcode = new QrCodeWithLogo({
canvas: document.getElementById("canvas"),
content: qrURL,
width: 380,
// download: true,
image: document.getElementById("image"),
logo: {
src: logoURL,
logoSize: 0.2
}
});
qrcode.toImage();
document.getElementById("disableDownload").disabled = false;
}