Як згенерувати QR-код з адресою поточної сторінки

  у розділі Технічні теми 

QR-кодQR-код — двовимірний "штрих код", що може містити текстову інформацію, контактні дані, інтернет-адресу тощо.

Він набуває великої популярності не лише на виробництві, але й у торгівлі, туристичній сфері, та інтернет-мережі, бо більшість сучасних телефонів можуть зчитувати QR-коди за допомогою вбудованої камери, спрощуючи життя їх власникам.

Я хочу встановити на веб-сторінці QR-код, що буде автоматично генеруватись та містити інформацію про сторінку, на якій його розташовано.

Існує багато онлайн-сервісів для генерування QR-кодів. Проте вони генерують статичний малюнок-код, зашифровуючи у ньому дані, що було вказано користувачем.

На щастя, сервіс Chart API від Google пропонує можливість генерувати QR-коди "на льоту" (а також десятки інших типів графіків та чартів).

В HTML-коді сторінки достатньо лише замість розташування зображення вказати спеціальну адресу, що містить інформацію про тип згенерованого малюнка та даних, які міститимуться в ньому.

Наприклад ось так:

<img src="http://chart.apis.google.com/chart?chs=135x135&cht=qr&chl=http%3A%2F%2Fyura.stryi.com" />

Результат Ви бачите в правому верхньому кутку, на початку статті.

Єдина проблема — адреса сторінки задається нами вручну. А хочеться, щоб такий малюнок показувався на кожній сторінці і містив адресу цієї, конкретної сторінки.

Це допоможе зробити Javascript:

<script type="text/javascript">
var url = escape(document.URL);
document.write('<img src="http://chart.apis.google.com/chart?chs=135x135&cht=qr&chld=|0&chl='+url+'">');
</script>

Тепер, для генерування QR-коду буде передаватись поточна адреса (URL). На місці цього Javascript-коду з’явиться малюнок, що міститиме адресу сторінки яка зображає його.

Таким чином кожна сторінка буде показувати свій, персональний, QR-код.

Маючи достатню фантазію, правильний HTML-код сторінки, та трохи знань з JavaScript можна, подібним чином, автоматично генерувати QR-код для телефоних номерів, SMS-повідомлень, контактної інформації, координат карт тощо, що містяться на певній веб-сторінці.

Корисні посилання:

До речі, ця веб-сторінка теж чудово читається на мобільних пристроях. :)


Коментарі