使用 HTML、CSS 和 jQuery 的二维码生成器

二维码生成器是一种应用程序，可将任何所需的文本数据存储到二维码中，稍后可以使用二维码扫描仪对其进行扫描以显示存储的信息。此 QR 码可用于任何地方，例如海报或网站上，以允许用户获取更多信息。此应用程序将允许用户输入所需的数据并将其保存为二维码的 PNG 或 SVG 图像。

方法：要生成二维码，我们将使用 Google Charts API。使用jQuery，根据API返回的图像更新要显示的二维码图像。

下面给出了将使用的 API 端点。

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

网址说明：

• Google Chart Infographics 的根 URL是 https://chart.googleapis.com/chart 。这可以使用所需的参数来指定以获得所需的输出。
• chs参数表示二维码图像的大小(以像素为单位)。
• cht参数表示要创建的图像的类型。值“qr”将用于生成二维码。
• chl参数表示要在二维码中编码的文本或 URL 数据。

例子：

HTML

  

  
  
  
  
    .qr-code {
      max-width: 200px;
      margin: 10px;
    }
  
  
  QR Code Generator

  

  
    
  
      
      
    
  
    
      
        
          Content:
        
        
  
          
          
        
      
      
        
  
          
          
            Generate
          
        
      
    
  
  
  
  
  
    // 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);
      });
    });
  

  

输出：