Image to QR Code Generator
About this app
Convert your images to QR codes easily and quickly with our fun and colorful web app!
Image to QR Code Generator Image to QR Code Generator Upload an image and generate a QR code for it! No QR code generated yet. Save QR Code
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Image to QR Code Generator</title>
<meta name="description" content="Convert your images to QR codes easily and quickly with our fun and colorful web app!">
<meta name="keywords" content="QR Code, Image to QR, QR Generator, Fun Web App, Colorful Design">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-qrcode/1.0.0/jquery.qrcode.min.js"></script>
<style>
body {
background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
font-family: 'Roboto', sans-serif;
}
#app-container {
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin-top: 50px;
}
#qr-code {
margin-top: 20px;
padding: 15px;
border: 2px dashed #fda085;
border-radius: 10px;
text-align: center;
background-color: #fffdd0;
}
#fileInput {
background: #fda085;
border: none;
border-radius: 5px;
color: white;
}
#fileInput:hover {
background: #f76f32;
}
#generate-button {
margin-top: 10px;
}
</style>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const fileInput = document.getElementById('fileInput');
const qrContainer = document.getElementById('qr-code');
fileInput.addEventListener("change", function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const imgSrc = e.target.result;
const qrText = imgSrc;
qrContainer.innerHTML = ''; // Clear previous code
$('#qr-code').empty().qrcode({width: 150, height: 150, text: qrText});
};
reader.readAsDataURL(file);
}
});
});
function saveLocal() {
const qrData = document.getElementById('qr-code').innerHTML;
localStorage.setItem('qrCode', qrData);
}
function loadLocal() {
const qrData = localStorage.getItem('qrCode');
if (qrData) {
document.getElementById('qr-code').innerHTML = qrData;
}
}
// Load QR code on page load if available
window.onload = loadLocal();
</script>
</head>
<body>
<div id="main-container" class="container">
<div id="app-container" class="text-center">
<h1 class="text-danger">Image to QR Code Generator</h1>
<p class="lead">Upload an image and generate a QR code for it!</p>
<input type="file" accept="image/*" id="fileInput" class="form-control mb-3" />
<div id="qr-code">
<p>No QR code generated yet.</p>
</div>
<button id="generate-button" class="btn btn-primary" onclick="saveLocal()">Save QR Code</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!