1. Скачаем библиотеку тут http://jeromeetienne.github.com/jquery-qrcode/.
2. Напишим так index.php:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Генератор QR-кодов</title>
<style>
#qr { width:100px; height:100px; border:1px solid #eee; }
</style>
<script src="qrcode.min.js"></script>
<script>
window.onload = () => {
// Добавляем события на кнопку Преобразовать текст в QR
document.getElementById('btn').addEventListener('click', () => {
// Проверяем не пустое ли поле
if(document.getElementById('field').value != '') {
// Очищаем Div в котором должна отобразиться QR код
document.getElementById('qr').innerHTML = '';
// Инициализация
var qrcode = new QRCode(document.getElementById('qr'),
{ width:100, height:100 });
// Генерируем QR-код
qrcode.makeCode(document.getElementById('field').value);
}
else {
// Если поле пустое, то показываем alert
alert('Введите текст в поле!');
}
});
}
</script>
</head>
<body>
<button id="btn">Преобразовать текст в QR</button>
<input type="text" id="field" placeholder="введите текст">
<br><br>
<div>Результат:</div>
<div id="qr"></div>
</body>
</html>3. Результат работы алгоритма: