首页 > 心得笔记 > 利用Google API快速生成QR二维码

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

2011年5月6日  34,489 views 发表评论 阅读评论

昨天发现很多网站都贴上了自己网址的二维码,我觉得这样挺有意思的,就研究了一下怎样生成二维码。结果发现,现在来说生成二维码最简单的方法是使用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

你将得到一个内容为本站网址的QR二维图。
http://Codeup.org

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

一、什么是二维码

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

具体QR码的定义可以查看维基百科的介绍

二、怎样利用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

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

  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文档
  5. &chld=L|4 L代表默认纠错水平; 4代表二维码边界空白大小,可自行调节。具体参数请参考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:

Parameter Required or Optional Description
cht=qr Required Specifies a QR code.
chs=<width>x<height> Required Image size.
chl=<data> Required 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.
choe=<output_encoding> Optional How to encode the data in the QR code. Here are the available values:

  • UTF-8 [Default]
  • Shift_JIS
  • ISO-8859-1
chld=<error_correction_level>|<margin> Optional
  • error_correction_level - 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 appendix for details. Here are the supported values:
    • L - [Default] Allows recovery of up to 7% data loss
    • M - Allows recovery of up to 15% data loss
    • Q - Allows recovery of up to 25% data loss
    • H - Allows recovery of up to 30% data loss
  • margin - The width of the white border around the data portion of the code. This is in rows, not in pixels. (See below to learn what rows are in a QR code.) The default value is 4.

三、我的QR二维码生成器

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

QR生成器链接:http://test.codeup.org/CreateQR.html

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

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

四、为WordPress中每篇文章QR码

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

<img src="https://chart.googleapis.com/chart?cht=qr&chs=150x150&choe=UTF-8&chld=L|4&chl=<?php the_permalink(); ?>" width="150" height="150" alt="QR 码" />


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


我要分享到:

新浪微博 腾讯微博 人人 Twitter Facebook 网易微博 鲜果 Follow5
  1. Pingback: 利用Google API给每篇文章的网址生成二维码 – 情歌

  2. Pingback: 利用Google API快速生成QR二维码 « yife.im-牛会飞

  3. Pingback: 利用Google API让wordpress每篇文章快速生成QR二维码 | 明仁帮

  4. 生成二维码很方便,为自己的网站首页生成一个二维码图片,现在的问题是:用手机扫描二维码,能认出二维码,也能看到网址,但是不能添加好友,这可怎么办?
    在生成二维码输入内容里面,只输入网址,还是需要什么代码?

    • 手动处理,在生成二维码的时候将纠错水平选的高一点,然后在生成图片的中间ps上图片或者文字就好了。

  5. 生成了以下代码 如何让QR码变成多排呢?
    <html>
    <body style="margin: 0px;">
    <h1 style="margin: 60px;">WP001</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP001=1=23195001">
    <h1 style="margin: 60px;">WP002</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP002=2=23196002">
    <h1 style="margin: 60px;">WP003</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP003=3=23197003">
    <h1 style="margin: 60px;">WP004</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP004=4=23198004">
    <h1 style="margin: 60px;">WP005</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP005=5=23199005">
    <h1 style="margin: 60px;">WP006</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP006=6=23200006">
    <h1 style="margin: 60px;">WP007</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP007=7=23201007">
    <h1 style="margin: 60px;">WP008</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP008=8=23202008">
    <h1 style="margin: 60px;">WP009</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP009=9=23203009">
    <h1 style="margin: 60px;">WP010</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP010=10=23204010">
    <h1 style="margin: 60px;">WP011</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP011=11=23205011">
    <h1 style="margin: 60px;">WP012</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP012=12=23206012">
    <h1 style="margin: 60px;">WP013</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP013=13=23195002">
    <h1 style="margin: 60px;">WP014</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP014=14=23196003">
    <h1 style="margin: 60px;">WP015</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP015=15=23197004">
    <h1 style="margin: 60px;">WP016</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP016=16=23198005">
    <h1 style="margin: 60px;">WP017</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP017=17=23199006">
    <h1 style="margin: 60px;">WP018</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP018=18=23200007">
    <h1 style="margin: 60px;">WP019</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP019=19=23201008">
    <h1 style="margin: 60px;">WP020</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP020=20=23202009">
    <h1 style="margin: 60px;">WP021</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP021=21=23203010">
    <h1 style="margin: 60px;">WP022</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP022=22=23204011">
    <h1 style="margin: 60px;">WP023</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP023=23=23205012">
    <h1 style="margin: 60px;">WP024</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP024=24=23206013">
    <h1 style="margin: 60px;">WP025</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP025=25=23195003">
    <h1 style="margin: 60px;">WP026</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP026=26=23196004">
    <h1 style="margin: 60px;">WP027</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP027=27=23197005">
    <h1 style="margin: 60px;">WP028</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP028=28=23198006">
    <h1 style="margin: 60px;">WP029</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP029=29=23199007">
    <h1 style="margin: 60px;">WP030</h1><img style="-webkit-user-select: none" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=200×200&amp;choe=UTF-8&amp;chld=L|4&amp;chl=WP030=30=23200008">
    </body>
    </html>

  6. 不好意思,大神,我是一个写底层的,现在工接触这个,我想知道我要使我们公司的网页生成二维码信息发送手机,这个的思路应该怎么做?