首页 » 前端技术 » 如何让网页自动生成二维码的方法以及代码

如何让网页自动生成二维码的方法以及代码

高蒙 2016/03/15 17:31 4.4k浏览 0评论 jQuery/js


如何让网页自动生成二维码这个功能在开发过程中遇到了,要求每个网页都相应的生成一个二维码图片。其实网页自动生成二维码的功能,我一直都是很想做的,只是一直停留在想法当中,今天刚好项目中遇到,那么我就着手去实现一下自动生成二维码。

自动生成二维码的效果如下:

1111.jpg

这里我提供两种自动生成二维码的方法:

一、第一种自动生成二维码的方法。

看图,这个是官网上面的截图,其实我们在调用的时候,只是一段简单的js即可。图中标红的地方就是我们要生成的二维码的内容。

222.jpg

生成二维码代码:

<script type="text/javascript">
/* 2014/07/19 21:09 */
var _qrContent='http://www.shuchengxian.com',_qrLogo='',_qrWidth=100,_qrHeight=100,_qrType = 'url';
if(!_qrContent) var _qrContent =escape(document.location.href);
document.write(unescape("%3Cscript src='http://qrcode.leipi.org/js.html?qw="+_qrWidth+"&qh="+_qrHeight+"&qt="+_qrType+"&qc="+escape(_qrContent)+"&ql="+escape(_qrLogo)+"' type='text/javascript'%3E%3C/script%3E"));
</script>

通过上面的代码:我们会发现写入到网页中的代码是这样的。

<a href="http://qrcode.leipi.org/qr.html?hash=c8039d2b57b36fe9de0e0ace8acd07d2" target="_blank">
<img border="0" src="http://qrcode.leipi.org/Uploads/www.shuchengxian.com/2016/03/15/3653d0d982de0d4eab7922ba2280a49a.png" width="100" height="100"></a>

调用的代码,自动的个加上了A链接,还是他自己的链接。那么这个问题我们怎么解决呢。其实,很简单,只要通过jq就可以简单的处理掉这个问题。

代码如下:

$(document).ready(function(){
    var url="http://www.shuchengxian.com";
    $('a').attr('href',url);
})

 

通过上面的jq可以去掉原始数据里面的A链接,效果如下:

<a href="http://www.shuchengxian.com" target="_blank">
<img border="0" src="http://qrcode.leipi.org/Uploads/www.shuchengxian.com/2016/03/15/3653d0d982de0d4eab7922ba2280a49a.png" width="100" height="100"></a>

二、第二种自动生成二维码的方法。

这种实现的方式就更加的简单。

1)、生成二维码图片的代码:

http://cli.im/qr?text=你的内容  

简单的一行代码就可以实现打开你的内容的二维码图片。

2)、将下面的代码添加到你的网站模板中:

<a href="http://cli.im/" style="border:0 none;cursor:default;text-decoration:none;" title="在线二维码生成器"><img src="http://cli.im/qr?text=你的内容&level=L alt="在线二维码生成器" /></a>

轻松的一段代码,就可以实现网页自动生成二维码图片的功能。

三、总结。上面的两种实现网页自动生成二维码的功能的全部过程,而且,方法都是亲测可用的。还等什么赶紧试试吧。




相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    481

    标签

    38

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。