A-A+

利用API制作二维码(QR code)

2015年01月09日 网站建设 暂无评论 阅读 3,680 views 次

其实就是一个API的引用链接

直接设置自己需要的参数,加上要生成的文件、网址即可。地址是:

https://chart.googleapis.com/chart?cht=qr&chs=300x300&choe=UTF-8&chld=L|3&chl=http://www.imdupeng.cn/

其中有五个参数用法解释如下:

1、&:网页传至中表示与的标记,这里不再多说。

2、cht=qr:设置图表类型为qr,也就是二维码。

3、chs=300×300:设置生成图片尺寸(宽x高)为300×300,但这并不是生成图片的真实尺寸,而是最大尺寸,具体可以受网页元素约束。choe=UTF-8:设置内容的编码格式为UTF-8,此值默认为UTF-8。

4、chld=L|3:L代表默认纠错水平,3代表二维码边界空白大小,可自行调节。
chl=http://www.imdupeng.cn/:QR内容,也就是解码后看到的信息,包含中文时需使用UTF-8编码汉字,否则将出现问题。

 

网上提供二维码生成的不止google,还有很多,比如:

http://api.qrserver.com/v1/create-qr-code/?size=300x300&data=http://www.imdupeng.cn/

相对于Google API来说,这个是专门提供QR CODE的链接,参数就只有size和data,所以更为方便。

 

 

下为本博客域名二维码,可以试试扫描看看:

二维码制作

 

 

添加弹出二维码:

知道怎么添加二维码了,但总不能每次手动输入吧,所以针对Wordpress博客来说,我们需要在single.php加一段代码,当然,也可以添加在边栏或者其他任何你希望出现二维码的地方。

 

其实很简单,需要改动三个文件,single.php、style.css、***.js(视实际情况而定,你博客主题中包含的自定义js脚本即可,也可以自己新建,但记得要添加script引入)。

 

1、single.php中在文章末尾或其他位置添加如下代码:

<div id="chart">

<h5><span>< ?php the_title(); ?></span><a href="javascript:;" onclick="slide();"></a></h5>

<img alt="文章《<?php the_title(); ?/>》二维码" src="https://chart.googleapis.com/chart?cht=qr&chs=300x300&choe=UTF-8&chld=L|3&chl=< ?php the_permalink() ?>" />

</div>

 

在需要添加链接的地方添加如下代码:

扫二维码:<a href="javascript:;" alt="文章《<?php the_title(); ?>》二维码" title="文章《< ?php the_title(); ?>》二维码" onclick="slide('show');">< ?php the_title(); ?></a>

具体内容可根据自己需要修改。

 

2、style.css中添加如下样式:

/*二维码*/

#chart {

position: fixed;

display: none;

width: 300px;

border: 6px solid #8F8F8F;

padding: 0;

background: #F6F6F6;

z-index: 100;

text-align: left;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-webkit-box-shadow: 0 0 7px #aaa;

-moz-box-shadow: 0 0 7px #aaa;

margin-left:-156px;

left:50%;

top:40%;

margin-top:-103px;

_margin-left:-156px;

_position:absolute;

_margin-top:103px;

_top:expression(eval(document.documentElement.scrollTop));

}
#chart h5 {
width: 100%;
height: 28px;
color: #626262;
font: 14px/28px '宋体';
font-weight: 700;
text-indent: .5em;
float: left;
margin: 0;
overflow: hidden;
}
#chart h5 span{
width:250px;
overflow: hidden;
}
#chart h5 a {
width: 22px;
height: 23px;
background: url(poorren/images/a.gif) no-repeat 0 0;
cursor: pointer;
position: absolute;
right: 8px;
top: 4px;
}

就是控制弹出层的位置,但这样的样式定义后是不能通过W3C验证的,对此如果有洁癖的话建议自己搜索相应Javascript实现代码来控制弹出层的位置,这里不再举例。

 

3、在***.js中添加如下脚本:

//*二维码*/
function slide(flag){
var chart=document.getElementById("chart");
if(flag=='show'){
chart.style.display='block';
}else{
chart.style.display='none';
}
}

 

如果没有自定义的js文件,可以新建或者写在页内,建议自己新建文件并引入。

标签:

给我留言