Добавление QR-кода - это удобная опция для создания ссылки на сайт/акцию/соцсеть для перехода на них с мобильного телефона.
Здесь мы рассмотрим простое создание QR-кода (Quick Response - Быстрый Отклик) в несколько шагов с помощь плагина qrcode.js.
Базовое использование
Для создания QR-кода вам нужен будет плагин, который можно скачать по ссылке или найти на CDN. Он совместим со всеми популярными браузерами: IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC. При помощи QR-кода можно закодировать любую информацию, например: текст, номер телефона, ссылку на сайт или визитную карточку.
Подключение файла плагина
Для начала в блоке head или перед закрывающимся тегом </body> вам нужно подключить файл плагина.
| 1 2 3 4 5 6 7 8 9 10 11 | <!--файл qrcode.min.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- или --> <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script> <!--файл qrcode.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js" integrity="sha512-is1ls2rgwpFZyixqKFEExPHVUUL+pPkBEPw47s/6NDQ4n1m6T/ySeDW3p54jp45z2EJ0RSOgilqee1WhtelXfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> |
Использование
Также вам нужен будет тег, в который вы поместите сгенерированный QR-код и небольшой скрипт:
| 1 2 3 4 | <div id="qrcode"></div> <script type="text/javascript"> new QRCode(document.getElementById("qrcode"), "https://html-plus.in.ua/javascript"); </script> |
Вот как выглядит QR-код:
See the Pen QR code with qrcode.js by Elen (@ambassador) on CodePen.
Настройки плагина
В качестве настроек вы можете указать ширину и высоту QR-кода, цвет темной и светлой области
| 1 2 3 4 5 6 7 8 | var qrcode = new QRCode("test", { text: "https://html-plus.in.ua/category/css/", width: 150, height: 150, colorDark : "#384bac", colorLight : "#aaffff", correctLevel : QRCode.CorrectLevel.H }); |
Пример:
See the Pen QR code with qrcode.js by Elen (@ambassador) on CodePen.
Методы
Метод qrcode.clear() очищает QR-код.
Метод qrcode.makeCode("https://somesite.com") создает другой QR-код.
С помощью примера ниже вы можете сгенерировать любой QR-код.
See the Pen Cross-browser QRCode by Elen (@ambassador)on CodePen.
Кроме использования плагина, вы также можете сгенерировать QR-код с помощью онлайн-ресурсов, например, qr.io или qrcode.tec-it.com.
А в этом примере вы можете загрузить и распознать QR-код.
See the Pen QR Code Reader in JavaScript by Elen (@ambassador) on CodePen.
