jquery.qrcode 生成二维码

识别字符串

1、首先下载 jquery.qrcode 插件后,在页面中引入 jquery 库文件和 qrcode 插件。

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

2、在页面中需要显示二维码的地方加入标签:

<div id="qrcode" style="text-align: center;"></div> 

3、调用 qrcode 插件。

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

$(‘#qrcode‘).qrcode("http://www.baidu.com"); //任意字符串 

也可以通过以下方式调用:

$("#qrcode").qrcode({     render: "table", //table方式     width: 200, //宽度     height:200, //高度     text: "www.baidu.com" //任意内容 }); 

这样就可以在页面中生成一个二维码。接下来就可以用手机“扫一扫”功能读取二维码信息。

识别中文

我们试验的时候发现不能识别中文内容的二维码,通过查找多方资料了解到,jquery-qrcode 是采用charCodeAt() 方式进行编码转换的。而这个方法默认会获取它的 Unicode 编码,如果有中文内容,在生成二维码前就要把字符串转换成 UTF-8,然后再生成二维码。您可以通过以下函数来转换中文字符串:

function toUtf8(str) {        var out, i, len, c;        out = "";        len = str.length;        for(i = 0; i < len; i++) {            c = str.charCodeAt(i);            if ((c >= 0x0001) && (c <= 0x007F)) {                out += str.charAt(i);            } else if (c > 0x07FF) {                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));                out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));            } else {                out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));                out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));            }        }        return out;    } 

以下示例:

var str = toUtf8("中文二维码!"); $(‘#qrcode‘).qrcode(str); 

ps:

jquery.qrcode.min.js 下载地址

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

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

时间: 2024-10-05 01:58:55

jquery.qrcode 生成二维码的相关文章

使用jquery.qrcode生成二维码实现微信分享功能

前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquery.qrcode插件生成二维码 jquery.qrcode cdn地址 参见: https://www.bootcdn.cn/jquery.qrcode/ 1.加载 jQuery 和 jquery.qrcode.js: <script src="https://cdn.bootcss.com/

使用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=&

使用jquery.qrcode生成二维码(转)

jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. 代码   <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js">

jquery.qrcode生成二维码

qrcode其实是通过使用jQuery实现图形渲染,画图,支持canvas(HTML5)和table两种方式,github地址:https://github.com/jeromeetienne/jquery-qrcode 以下是demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Qrcod

Pyqt+QRcode 生成二维码

python生成二维码是件很简单的事,使用第三方库Python QRCode就可生成二维码,我用Pyqt给QRcode打个壳 一.python-qrcode介绍 python-qrcode是个用来生成二维码图片的第三方模块,依赖于 PIL 模块和 qrcode 库. PIL下载地址: https://pypi.python.org/pypi/PIL/1.1.6         或 http://www.pythonware.com/products/pil/ qrcode下载地址: https:

asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像 .

<%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using System.Web; using ThoughtWorks.QRCode.Codec; using ThoughtWorks.QRCode.Codec.Data; using ThoughtWorks.QRCode.Codec.Util; using System.IO; using System.Text; us

C# 利用QRCode生成二维码图片

引用LYBwwp的博文http://blog.csdn.net/lybwwp/article/details/18444369 网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了一个项目后,简单的整理了一下. 组件下载地址:http://download.csdn.net/detail/lybwwp/6861821 下载文件包包含ThoughtWo

Qrcode生成二维码的参数总结 及最小尺寸的测试

Qrcode生成二维码,做过很多实验,探索最小规格的二维码到底是多少尺寸,和最高规格的二维码到底是多大尺寸.现在我总结总结: 有两种思路: 1.生成规格高的二维码,然后压缩到自己想要的尺寸的二维码.这种:压缩算法不好的时候会很坑爹. 2.根据调整的参数生成原图,这种图是比较清晰的,打印出来都可以很好的被识别. 先说说第二种吧:根据测试, 1.不设置任何东西时:根据测试 最小的二维码尺寸是45--47:宽高(对于1---14个字符), 第二梯度:54-56:宽高(对于15--26字符) 第三梯度:

在angular中结合使用jquery的生成二维码插件

最近在开发项目中,需要在ionic框架中使用到jquery的生成二维码功能的插件,起初我直接在templates中写js代码: 发现这段代码根本就不会执行,原因是js代码必须要在该模块的作用域范围内才能生效,于是把这段代码该模块对应的controller中即可: 在学习angular中永远不要忘记作用域这件事.哈哈,看来学习编程的过程中有时需要抛开传统的思维方式才行啊.虽然只是一个小小的问题,但对于初学angular的我还是纠结了好一阵.