Генератор QR-кода с использованием HTML, CSS и jQuery

Опубликовано: 17 Декабря, 2021

Генератор QR-кода - это приложение, которое сохраняет любые требуемые текстовые данные в QR-код, который впоследствии может быть отсканирован с помощью сканера QR-кода, чтобы выявить сохраненную информацию. Этот QR-код можно использовать где угодно, например, на плакате или веб-сайте, чтобы пользователи могли получить дополнительную информацию. Это приложение позволит пользователю вводить требуемые данные и сохранять их в виде изображения QR-кода в формате PNG или SVG.

Подход: для генерации QR-кода мы будем использовать Google Charts API. Используя jQuery, отображаемое изображение QR-кода обновляется в соответствии с изображением, возвращаемым API.

Конечная точка API, которая будет использоваться, указана ниже.

https://chart.googleapis.com/chart?chs=150×150&cht=qr&chl=Hello%20world

Пояснение к URL:

Корневой URL-адрес для инфографики Google Chart - https://chart.googleapis.com/chart . Это может быть указано с необходимыми параметрами для получения желаемого результата.
Параметр chs обозначает размер изображения QR-кода в пикселях.
Параметр cht обозначает тип создаваемого изображения. Значение «qr» будет использоваться для создания QR-кода.
Параметр chl обозначает текст или данные URL, которые нужно закодировать в QR-коде.

Пример:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
  <!-- Include Bootstrap for styling -->
  < link rel = "stylesheet" href =
 " https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css " />
 
  < style >
    .qr-code {
      max-width: 200px;
      margin: 10px;
    }
  </ style >
 
  < title >QR Code Generator</ title >
 </ head >
 
< body >
  < div class = "container-fluid" >
    < div class = "text-center" >
 
      <!-- Get a Placeholder image initially,
       this will change according to the
       data entered later -->
      < img src =
 " https://chart.googleapis.com/chart?cht=qr&chl=Hello +World&chs=160x160&chld=L|0"
        class = "qr-code img-thumbnail img-responsive" />
    </ div >
 
    < div class = "form-horizontal" >
      < div class = "form-group" >
        < label class = "control-label col-sm-2"
          for = "content" >
          Content:
        </ label >
        < div class = "col-sm-10" >
 
          <!-- Input box to enter the
              required data -->
          < input type = "text" size = "60"
            maxlength = "60" class = "form-control"
            id = "content" placeholder = "Enter content" />
        </ div >
      </ div >
      < div class = "form-group" >
        < div class = "col-sm-offset-2 col-sm-10" >
 
          <!-- Button to generate QR Code for
           the entered data -->
          < button type = "button" class =
            "btn btn-default" id = "generate" >
            Generate
          </ button >
        </ div >
      </ div >
    </ div >
  </ div >
  < script src =
    " https://code.jquery.com/jquery-3.5.1.js " >
  </ script >
 
  < script >
    // Function to HTML encode the text
    // This creates a new hidden element,
    // inserts the given text into it
    // and outputs it out as HTML
    function htmlEncode(value) {
      return $('< div />').text(value)
        .html();
    }
 
    $(function () {
 
      // Specify an onclick function
      // for the generate button
      $('#generate').click(function () {
 
        // Generate the link that would be
        // used to generate the QR Code
        // with the given data
        let finalURL =
 ' https://chart.googleapis.com/chart?cht=qr&chl= ' +
          htmlEncode($('#content').val()) +
          '&chs=160x160&chld=L|0'
 
        // Replace the src of the image with
        // the QR code image
        $('.qr-code').attr('src', finalURL);
      });
    });
  </ script >
 </ body >
 
</ html > 

Выход:

Вопросы о Web технологиях JQuery HTML CSS-Misc HTML-Misc CSS

Генератор QR-кода с использованием HTML, CSS и jQuery

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ