Сегодня QR коды стали неотъемлемой частью нашей жизни. Их используют все, у кого есть мобильное устройство, например, смартфон, планшет или что-то другое.
Создать QR код для сайта, зашифровав любую фразу, очень просто. Всё, что вам надо - это сайт (или даже просто HTML страничка). Просто выполняйте шаги, описанные ниже, чтобы узнать, как это сделать.
Добавьте новую страницу к вашему сайту или просто создайте страницу, если вам не нужен целый сайт. Код страницы будет выглядеть похожим на пример ниже:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body></body>
</html>Это самая базовая страница HTML, мы пока ничего туда не добавляли. Конечно, её недостаточно, чтобы создать то, зачем мы здесь, поэтому давайте её для начала сохраним, назвав, например, MyPage.html, и перейдём ко второму шагу.
jQuery - это широко известная библиотека JavaScript, которая используется на множестве сайтов. Вы можете скачать её с официального сайта или подключить её, используя адрес CDN. Давайте не будем ничего скачивать и подключим последнюю версию с CDN сайта Google:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body></body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>Отлично. Теперь у нас есть HTML страница с поддержкой jQuery, и нам понадобится добавить к ней код генератора QR. Скачайте файл с названием qrcode.min.js отсюда, положите его в папку рядом со страницей (назовём, например, папку js, чтобы знать, что все скрипты для нашей страницы или сайта будут лежать там) и подключите его к странице:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body></body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/qrcode.min.js"></script>
</html>Обратите внимание, что код qrcode.min.js подключается после jQuery, поскольку эта библиотека нужна для его правильной работы.
Теперь создадим элемент DOM, в который мы будем помещать нашу картинку сгенерированного QR кода. Добавим элемент div с идентификатором id="qrcode":
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body>
<div id="qrcode"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/qrcode.min.js"></script>
</html>Всё, что осталось сделать - это инициализировать созданный элемент QR кода. Это делается с помощью следующей строки: var qrcode = new QRCode(document.getElementById("qrcode"),{text: "My QR code works!"});. Поместите её после подключения скрипта qrcode.min.js, используя тэг <script></script>:
<!DOCTYPE html>
<html>
<head>
<title>My new page</title>
</head>
<body>
<div id="qrcode"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/qrcode.min.js"></script>
<script>
var qrcode = new QRCode(document.getElementById("qrcode"),{text: "My QR code works!"});
</script>
</html>Теперь откройте вашу созданную страницу в браузере. Если всё сделано правильно, вы увидите ваш QR код на созданной странице: