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

1.将jquery.qrcode.min.js和jquery添加到您的网页中

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

2.然后创建一个DOM元素去包含生成qr码。

<div id="qrcode"></div>

3.然后你在此容器中的添加qrcode

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

<script>
jQuery(function(){
jQuery('#qrcode').qrcode("http://www.jq22.com");
})
</script>

指定二维码的生成方式:

可以在调用函数的同时输入想要的二维码生成方式(table/canvas)

//使用table生成
jQuery('#qrcode').qrcode({
render: "table",
   width: 200, //宽度
   height:200, //高度
text: "http://www.jq22.com"
}); //使用canvas生成
jQuery('#qrcode').qrcode({
render: "canvas",
text: "http://www.jq22.com"
});

指定生成二维码的大小:

可以在调用函数的同时输入想要生成二维码的宽度和高度即可指定生成的二维码的大小

//生成100*100(宽度100,高度100)的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
width: 100,
height: 100,
text: "http://www.jq22.com"
});

指定生成二维码的色彩样式:

可以在调用函数的同时输入想要生成二维码的前景色和背景色即可指定生成的二维码的色彩样式

//生成前景色为红色背景色为白色的二维码
jQuery('#qrcode').qrcode({
render: "canvas", //也可以替换为table
foreground: "#C00",
background: "#FFF",
text: "http://www.jq22.com"
});

中文ULR生成方法:

jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI进行转码

or

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("中文!");
$('#code').qrcode(str);

jQuery生成二维码 jquery.qrcode.js的更多相关文章

  1. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  2. JQuery生成二维码,有资源下载

    原文链接:http://www.yxxrui.cn/article/65.shtml 没时间或者懒得看的,可以直接看加粗部分(或试试手感▼). 使用jquery.qrcode来生成二维码,qrcode ...

  3. QRCode生成二维码,jq QRCode生成二维码,QRCode生成电子名片

    [QRCode官网]http://phpqrcode.sourceforge.net/ PHP QRCode生成二维码 官网下载QRCode源码包,引入源码包中的 qrlib.php . <?p ...

  4. vue2.0 自定义 生成二维码(QRCode)组件

    1.自定义 生成二维码组件 QRCode.vue <!-- 生成二维码 组件 --> <template> <canvas class="qrcode-canv ...

  5. 为网页生成二维码(jquery.qrcode.min.js)

    做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...

  6. js,JQuery 生成二维码

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  7. 使用jquery生成二维码

    二维码已经渗透到生活中的方方面面,不管到哪,我们都可以用扫一扫解决大多数问题.二狗为了准备应对以后项目中会出现的二维码任务,就上网了解了如何使用jquery.qrcode生成二维码.方法简单粗暴,[] ...

  8. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  9. jquery 生成二维码

    jquery的二维码生成插件qrcode,在页面中调用该插件就能生成对应的二维码 <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. try里Response.end()问题

    问题 在xxx.aspx.cs中处理异步请求,大致代码如下: 但会发现始终会进catch. 原因 Response.End()会引发ThreadAbortException. 解决方案 使用HttpC ...

  2. SAP 财务模块 FI-TV 差旅管理

    SAP 财务模块 FI-TV 差旅管理 Travel Management差旅管理事务码              描述PRT3      Trip Costs: Maintain Postings ...

  3. HDU 3047 Zjnu Stadium(带权并查集)

    http://acm.hdu.edu.cn/showproblem.php?pid=3047 题意: 给出n个座位,有m次询问,每次a,b,d表示b要在a右边d个位置处,问有几个询问是错误的. 思路: ...

  4. [转]Eclipse下开发Struts奇怪异常:org.apache.struts.taglib.bean.CookieTei

    今天早上开始在Eclipse下学习struts,于是按照李兴华老师的<struts入门视频教程>一步一步地充满快乐的学习,等把登陆程序写完,打开浏览器准备运行的时候,奇怪的异常产生了,异常 ...

  5. _instance_reset

    制作多功能Item.creature及gameobject 中第19个功能 重置副本,关联到该表. 当该表中配置,且玩家有这个副本这个难度的进度时,功能宝石中会出现该副本的名字,点击可以重置副本 ma ...

  6. js 捕获浏览器后退事件

    $(document).ready(function(e) {             var counter = 0;             if (window.history &&am ...

  7. Python安装第三方库的安装技巧

    电脑:Windows10 64位. Python IDE 软件:JetBrains PyCharm Community Edition 2018.1.3 x64 Python version : Py ...

  8. dll多个版本问题

    在配置文件设置不同版本的dll即可 配置文件如下 configuration 节点下面的  runtime 节点新增各个版本配置内容 <runtime> <assemblyBindi ...

  9. 结合CRT与欧拉定理高阶幂求余

  10. Altium Designer PCB画板-交互式布局与模块化布局

    交互式布局 (1)为了达到原理图与PCB两两交互,需要在原理图界面和PCB界面都执行菜单命令“Tools-Cross Select Mode”,选择交互按钮