利用Google API快速生成QR二维码

今天药忘吃喽~ 2022-04-10 09:23 230阅读 0赞

现在来说生成二维码最简单的方法是使用Google Chart API来实现，再次膜拜Google大神～

Google Chart API是一套可以让你在线生成报表图的系统，通过URL你可以得到各种图表。  
举个例子：你在浏览器中输入

[https://chart.googleapis.com/chart?cht=qr&chs=200×200&choe=UTF-8&chld=L|4&chl=http://Codeup.org][https_chart.googleapis.com_chart_cht_qr_chs_200_200_choe_UTF-8_chld_L_4_chl_http_Codeup.org]

你将得到一个内容为本站网址的QR二维图。  
[![http://Codeup.org][https_chart.googleapis.com_chart_cht_qr_chs_200_200_choe_UTF-8_chld_L_4_chl_http_Codeup.org]][https_chart.googleapis.com_chart_cht_qr_chs_200_200_choe_UTF-8_chld_L_4_chl_http_Codeup.org]

回过头来我们再介绍一下二维码……好像这话放的位置不对，你们凑活着看吧……

## 一、什么是二维码 ##

随着科技的发展，智能手机越来越普及，QR码（二维码）的使用也越来越多了。利用手机的拍照功能，再加上一些QR码识别软件，可以通过二维码来记录一些比较枯燥并不好记的信息，比如说长长的网址。现在很多手机软件下载网站都提供了可视化的下载路径，就是将下载路径做成QR码，让手机用户快速读取QR码中的下载链接转到下载页面。

具体QR码的定义可以查看[维基百科的介绍][Link 1]。

## 二、怎样利用Google API生成二维码 ##

现在来说，最简单直接的生成QR码的方法就是通过Google Chart API来实现。先给出个实例，就拿最上面曾列出来那个说吧：

[https://chart.googleapis.com/chart?cht=qr&chs=200×200&choe=UTF-8&chld=L|4&chl=http://Codeup.org][https_chart.googleapis.com_chart_cht_qr_chs_200_200_choe_UTF-8_chld_L_4_chl_http_Codeup.org]

我们来分析一下这个链接中的参数：

1.  **https://chart.googleapis.com/chart?**这是Google Chart API的头部，直接照抄就好了～
2.  **&cht=qr**这是说图表类型为qr也就是二维码。
3.  **&chs=200×200**这是说生成图片尺寸为200×200，是宽x高。这并不是生成图片的真实尺寸，应该是最大尺寸吧。
4.  **&choe=UTF-8**这是说内容的编码格式为UTF-8，此值默认为UTF-8.其他的编码格式请参考[Google API文档][Google API]。
5.  **&chld=L|4**L代表默认纠错水平； 4代表二维码边界空白大小，可自行调节。具体参数请参考[Google API文档][Google API]。
6.  **&chl=XXXX**这是QR内容，也就是解码后看到的信息。包含中文时请使用UTF-8编码汉字，否则将出现问题。

鉴于Google API的文档可能会变化，我把其中关键部分摘录于下：

#  #

**Root URL:** `https://chart.googleapis.com/chart?`

QR code requests support the following URL query parameters after the ? in the root URL:

<table style="background-color:#ffffff;border-collapse:collapse;border:#cccccc 2px solid;"> 
 <tbody> 
  <tr> 
   <th style="text-align:left;background-color:#edeff0;vertical-align:top;border:#cccccc 1px solid;">Parameter</th> 
   <th style="text-align:left;background-color:#edeff0;vertical-align:top;border:#cccccc 1px solid;">Required or Optional</th> 
   <th style="text-align:left;background-color:#edeff0;vertical-align:top;border:#cccccc 1px solid;">Description</th> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><code>cht=qr</code></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><strong>Required</strong></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">Specifies a QR code.</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><code>chs=&lt;<em>width</em>&gt;x&lt;<em>height</em>&gt;</code></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><strong>Required</strong></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">Image size.</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><code>chl=&lt;<em>data</em>&gt;</code></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><strong>Required</strong></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">The data to encode. Data can be digits (0-9), alphanumeric characters, binary bytes of data, or Kanji. You cannot mix data types within a QR code. The data must be UTF-8 URL-encoded. Note that URLs have a 2K maximum length, so if you want to encode more than 2K bytes (minus the other URL characters), you will have to send your data using POST.</td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><code>choe=&lt;<em>output_encoding</em>&gt;</code></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">Optional</td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">How to encode the data in the QR code. Here are the available values: <p>&nbsp;</p> 
    <ul> 
     <li style="list-style-position:inside;"><code>UTF-8</code>&nbsp;[<em>Default</em>]</li> 
     <li style="list-style-position:inside;"><code>Shift_JIS</code></li> 
     <li style="list-style-position:inside;"><code>ISO-8859-1</code></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"><code>chld=&lt;<em>error_correction_level</em>&gt;|&lt;<em>margin</em>&gt;</code></td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;">Optional</td> 
   <td style="text-align:left;vertical-align:top;border:#cccccc 1px solid;"> 
    <ul> 
     <li style="list-style-position:inside;"><em>error_correction_level</em>&nbsp;- QR codes support four levels of error correction to enable recovery of missing, misread, or obscured data. Greater redundancy is achieved at the cost of being able to store less data. See the&nbsp;<a style="color:#2970a6;text-decoration:none;" href="https://developers.google.com/chart/infographics/docs/qr_codes#details" rel="nofollow">appendix</a>&nbsp;for details. Here are the supported values: 
      <ul> 
       <li style="list-style-position:inside;"><code>L</code>&nbsp;- [<em>Default</em>] Allows recovery of up to 7% data loss</li> 
       <li style="list-style-position:inside;"><code>M</code>&nbsp;- Allows recovery of up to 15% data loss</li> 
       <li style="list-style-position:inside;"><code>Q</code>&nbsp;- Allows recovery of up to 25% data loss</li> 
       <li style="list-style-position:inside;"><code>H</code>&nbsp;- Allows recovery of up to 30% data loss</li> 
      </ul></li> 
     <li style="list-style-position:inside;"><em>margin</em>&nbsp;- The width of the white border around the data portion of the code. This is in&nbsp;<em>rows</em>, not in&nbsp;<em>pixels</em>. (See&nbsp;<a style="color:#2970a6;text-decoration:none;" href="https://developers.google.com/chart/infographics/docs/qr_codes#details" rel="nofollow">below</a>&nbsp;to learn what rows are in a QR code.) The default value is 4.</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

## 三、我的QR二维码生成器 ##

昨天晚上花了点功夫自己做了一个可视化的QR二维码生成器，内容比较简单，界面比较简陋，纯粹是为了自己做着玩的。如果你想体验一把生成QR的话，可以来试一试。

QR生成器链接：[http://test.codeup.org/CreateQR.html][http_test.codeup.org_CreateQR.html]

现在我把CreateQR现在内嵌在这里，原地址在上面↑↑↑↑如果不能显示，请访问上面的链接。

如果你有什么建议的话请联系我。

## 四、为WordPress中每篇文章QR码 ##

可以为WordPress中的每篇文章地址都生成一个QR码放在旁边，具体代码如下，作为图片插入到文章中就OK了～

<table style="text-align:left;line-height:1.1em;background-color:#ffffff;font-style:normal;border-collapse:collapse;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:baseline;font-weight:normal;border:#cccccc 2px solid;"> 
 <tbody style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;"> 
  <tr style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;"> 
   <td style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#afafaf;font-size:1em;vertical-align:top;font-weight:normal;border:#cccccc 1px solid;"> 
    <div style="background-image:none;text-align:right;line-height:1.1em;background-color:#FFFFFF;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;border-top-width:0px;border-bottom-width:0px;font-size:1em;vertical-align:baseline;border-left-width:0px;font-weight:normal;border-right:#6ce26c 3px solid;">
      1 
    </div> </td> 
   <td style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:top;font-weight:normal;border:#cccccc 1px solid;"> 
    <div style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;"> 
     <div style="background-image:none;text-align:left;line-height:1.1em;background-color:#FFFFFF;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;"> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">&lt;img src=</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">"<a style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;font-size:1em;vertical-align:baseline;font-weight:normal;text-decoration:none;border:0px;" href="https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150&amp;choe=UTF-8&amp;chld=L" rel="nofollow">https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150&amp;choe=UTF-8&amp;chld=L</a>|4&amp;chl=&lt;?php the_permalink(); ?&gt;"</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">width=</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">"150"</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">height=</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">"150"</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">alt=</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#0000FF;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">"QR 码"</code> 
      <code style="background-image:none;text-align:left;line-height:1.1em;font-style:normal;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;color:#000000;font-size:1em;vertical-align:baseline;font-weight:normal;border:0px;">/&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**声明：**未作说明，则本文为[**代码至上**][Link 2]原创。转载务必注明[出处][Link 3]。  
**注意：转载须保留全文，如需修改请[联系作者][Link 4]。**  
本文永久地址:[http://codeup.org/archives/241][Link 3]

[https_chart.googleapis.com_chart_cht_qr_chs_200_200_choe_UTF-8_chld_L_4_chl_http_Codeup.org]: https://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=L%7C4&chl=http://Codeup.org
[Link 1]: http://zh.wikipedia.org/wiki/QR%E7%A2%BC
[Google API]: https://developers.google.com/chart/infographics/docs/qr_codes
[http_test.codeup.org_CreateQR.html]: http://test.codeup.org/CreateQR.html
[Link 2]: http://codeup.org/
[Link 3]: http://codeup.org/archives/241
[Link 4]: mailto:Codeup.wf@gmail.com?subject=%5B%E4%BB%A3%E7%A0%81%E8%87%B3%E4%B8%8A-Codeup.org%5D%E4%BF%AE%E6%94%B9%E5%8F%8A%E8%BD%AC%E8%BD%BD%E7%94%B3%E8%AF%B7%EF%BC%9A%E3%80%8A%E5%88%A9%E7%94%A8Google%20API%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90QR%E4%BA%8C%E7%BB%B4%E7%A0%81%E3%80%8B&body=%E7%94%B3%E8%AF%B7%E4%BF%AE%E6%94%B9%E5%B9%B6%E8%BD%AC%E8%BD%BD%E3%80%8A%E5%88%A9%E7%94%A8Google%20API%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90QR%E4%BA%8C%E7%BB%B4%E7%A0%81%E3%80%8B%E4%B8%80%E6%96%87%E3%80%82%E6%96%87%E7%AB%A0%E5%9C%B0%E5%9D%80:http://codeup.org/archives/241%0D%0A%E5%A6%82%E4%B8%8D%E5%90%8C%E6%84%8F%E8%AF%B7%E5%9B%9E%E5%A4%8D%E9%82%AE%E4%BB%B6%E5%91%8A%E7%9F%A5%EF%BC%8C%E4%B8%8D%E5%9B%9E%E5%A4%8D%E5%88%99%E9%BB%98%E8%AE%A4%E8%AE%B8%E5%8F%AF%E3%80%82%0D%0A%E8%BD%AC%E8%B4%B4%E5%9C%B0%E5%9D%80%EF%BC%9A%28%E8%AF%B7%E8%AE%BF%E5%AE%A2%E8%87%AA%E8%A1%8C%E5%A1%AB%E5%86%99%29