jQuery qrcode生成二维码的方法

现在二维码越来越流行,很多网页都会有个二维码,扫描后可通过手机浏览。

以前做类似的项目一般是在网页上生成图片,然后把图片插入到网页。

这样做不能每个页面都生成二维码。

jquery-qrcode是一个能够在浏览器端生成二维码的jquery插件。它是独立的,最小压缩之后不足4k,也没有图片下载请求。引入该类库之后,只需要一行代码,就可以很容易在web页面加上二维码。

qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,可以到

https://github.com/jeromeetienne/jquery-qrcode

获取最新的代码。

如何使用

1、首先在页面中加入jquery库文件和qrcode插件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2、在页面中需要显示二维码的地方加入以下代码:

<div id="code"></div>

3、调用qrcode插件

qrcode支持canvas和table两种方式进行图片渲染,默认使用canvas方式,效率最高,当然要浏览器支持html5

直接调用:

$('#code').qrcode("http://www.jb51.net.com"); //任意字符串

高级属性:

$("#code").qrcode({
render: "table", //table方式
width: 200, //宽度
height:200, //高度
text: "www.helloweba.com" //任意内容
});
时间: 2016-04-01

利用jquery包将字符串生成二维码图片

将一个字符串(可以是中文,在生成二维码图片之前将中文转码)生成二维码图片,如果想要带log的二维码,可以在生成后的二维码中间部位自己添加一个小log,log图片不要太大,不然就扫描不出内容了. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.8.3.js"

利用jquery.qrcode在页面上生成二维码且支持中文

实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>使用j

使用jquery.qrcode生成彩色二维码实例

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式.(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意.) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果如下: 代码如下: <html> <head> <title>JS生成二维码</title>

jquery插件qrcode在线生成二维码

随着移动互联网的发展,二维码现在应用得越来越广泛了,随手扫扫就可以浏览网站.加个好友什么的,比起手工输入真的是方便太多了. 前期做了一个综合测评系统,考虑逐步实现移动化,一长串的IP地址用户输入也不方便,借助二维码的话,用户拿起手机扫扫就可以直接进入系统. 基于这个应用场景,就上网研究下了网站二维码的实现方式,归纳起来有以下两种: 1.借助一些二维码生成网站或者二维码生成器生成二维码图片,然后挂在网站上,如码云 QR-Code (二维码) 在线生成器 优点:开发成本为零,能够快速实现多样化的二维

jquery.qrcode在线生成二维码使用示例

最近在做一个二维码的项目,所以在随便看的时候发现这个感觉挺不错的.jquery除了它自己非常出色的js功能之外还附带有数不清的插件,可以完成各种美好的效果和功能.jquery.qrcode就是其中一个,用来在线生成二维码. qrcode插件在github上开源的地址在https://github.com/jeromeetienne/jquery-qrcode 它的后面附带有使用说明,只有简单的四步,非常方便的调用. 插件是外国人写的,所以在开始使用的时候不能识别中文内容的二维码,因为jquery

使用jquery.qrcode.min.js实现中文转化二维码

今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串! 而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrc

jQuery实现二维码扫描功能

二维码:利用图形模拟二进制0.1的概念,达到存储少量数据的功能,一般移动端浏览器解析出二维码里面隐藏的url数据会自动进行跳转,常见的支付宝.微信扫描登陆就是利用该原理 Jquery二维码的实现:jquery.qrcode.min.js插件 HTML正文: <script type="text/javascript" src="js/jquery.qrcode.min.js"></script> <input type="bu

jQuery实现微信长按识别二维码功能

最近一直在搞一个微信开发的项目,终于快要完工了,今天小编抽个时间记录下在项目开发过程中遇到jquery.qrcode.min.js生成二维码长按不识别的解决方法,希望对大家有所帮助! 1.引入JS库 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.qrcode

Jquery 类网页微信二维码图块滚动效果具体实现

首先是自己定制的脚本方法属性代码: 复制代码 代码如下: /*  * 创建浮动图片广告(Generate a dock AD image)  *  * USAGE:   *  $(selector).higo_plugins_ad({  *      src:null,                    // 广告图片路径  *      closeSrc:null,               // 关闭图片路径  *      href:"#",                

使用jquery组件qrcode生成二维码及应用指南

有一些耗cpu的计算,完全可以在客户端上计算,比如生成二维码. qrcode其实是通过计算,然后使用jquery实现图形渲染和画图.支持canvas和table两种方式生成我们所需的二维码. 具体用法 qrcode是jquery组件,需要至少两个js, 就是 jquery 和 jquery.qrcode.可以到https://github.com/jeromeetienne/jquery-qrcode获取最新的代码. 复制代码 代码如下: <script type="text/javasc

使用jquery插件qrcode生成二维码

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,您可以到获取最新的代码. 如何使用 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text

thinkphp3.2框架集成QRcode生成二维码的方法分析

本文实例讲述了thinkphp3.2框架集成QRcode生成二维码的方法.分享给大家供大家参考,具体如下: 一.下载QRcode源代码 https://sourceforge.net/projects/phpqrcode/files/releases/ 使用phpqrcode必须开启GD2扩展,phpqrcode提供了一个png()方法,通过该方法,我们可以生成自已需要的二维码.该函数定义如下: public static function png( $text, $outfile = fals

qrcode生成二维码微信长按无法识别问题的解决

最近用QRCode.js 生成二维码之后,发现在小米和华为手机的微信上面页面长按识别不了,苹果和其他手机浏览器是正常的.qrcode在页面生成会生成一个canvas标签和一个img标签,在电脑浏览器上调试的时候发现生成二维码之后canvas标签是会自动隐藏的,然后展示img标签,然后通过vConsole 发现在小米或者华为手机上生成的二维码是通过canvas展示的,img标签被隐藏,而且img.src没有任何内容.怀疑是浏览器兼容问题. jquery.qrcode.js 是一个纯浏览器 生成 Q

使用PHP生成二维码的方法汇总

随着科技的进步,二维码应用领域越来越广泛,本站之前已有文章介绍通过使用jQuery插件来生成二维码,今天我给大家分享下如何使用PHP生成二维码,以及如何生成中间带LOGO图像的二维码. 利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: $urlToEncode="http://www.jb51.net"; generateQRfromGoogle($urlToEncode); /** * google api 二维码

PHP生成二维码的两个方法和实例

随着科技的进步,二维码应用领域越来越广泛,本站之前已有文章介绍通过使用jQuery插件来生成二维码,今天我给大家分享下如何使用PHP生成二维码,以及如何生成中间带LOGO图像的二维码. 利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: 复制代码 代码如下: $urlToEncode="http://www.jb51.net"; generateQRfromGoogle($urlToEncode); /**  * go

使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

使用jquery.qrcode.js生成二维码插件

二维码应用已经渗透到我们的生活工作当中,您只需要用手机对着二维码"扫一扫"即可获得所对应的信息,方便我们了解商家.购物.观影等等.本文将介绍一款基于jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码. 1.qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式, github源码地址:https://github.com/jeromeetienne/jquery-qrcode 参数说明: render