今天我要和大家分享的是利用qrcode来生成二维码。

首先要使用qrcode就需要引用文件，我这边用的是1.7.2版本的jquery加上qrcode

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

引入文件后我们就可以生成一个I love you的二维码。

代码如下：

$(function(){
$("#canvasqrcode").qrcode("I love you!");

});

在body里面增加<div id="canvasqrcode"></div>就大功告成了

要是调整大小可以用以下代码width,height后面默认是px写死在插件中，当然可以调整下插件。

$("#miniCodeOne").qrcode({width: 64,height: 64,text:"I love you!"});

另外也可以控制渲染方式

用下面代码render可以选择table或者canvas来进行渲染

$("#qrcode").qrcode({render: "table",text:"this plugin is
great"});

但是汉字支持不够我们需要进行转换

以下是函数

;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;
}

下面贴上我的网页代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript">
;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;
}
$(function(){
// render: "table", //table方式，canvas
$("#qrcode").qrcode({render: "table",text:"this plugin is

great"});
$("#canvasqrcode").qrcode("I love you!");
$("#chinaCode").qrcode(toUtf8("中国我爱你"));
$("#miniCode").qrcode({width: 64,height: 64,text:toUtf8("中国我爱

你")});
$("#miniCodeOne").qrcode({width: 64,height: 64,text:toUtf8("中国

我爱你")});
$("#colorCodeOne").qrcode({
text: "http://www.gbtags.com",
width: 260,
height: 260,
foregroun: '#FF0000'
});
});
</script>
</head>
<body>
<div id="qrcode"></div>
<br/><br/><br/><br/><br/><br/>
<div id="canvasqrcode"></div>
<br/><br/><br/><br/><br/><br/>
<div id="chinaCode"></div>
<br/><br/><br/><br/><br/><br/>
<div id="miniCode"></div>
<br/><br/><br/><br/><br/><br/>
<div id="miniCodeOne"></div>
<br/><br/><br/><br/><br/><br/>
<div id="colorCodeOne"></div>
</body>
</html>

qrcode生成二维码插件的更多相关文章

  1. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

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

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

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

    网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...

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

    Qrcode生成二维码,做过很多实验,探索最小规格的二维码到底是多少尺寸,和最高规格的二维码到底是多大尺寸.现在我总结总结: 有两种思路: 1.生成规格高的二维码,然后压缩到自己想要的尺寸的二维码.这 ...

  5. qrcode 生成二维码

    qrcode 生成二维码 Demo: https://www.hgnulb.cn/freedom/qrcode/qrcode.html qrcodeGithub 地址: https://github. ...

  6. C#Qrcode生成二维码支持中文,带图片，带文字

    C#Qrcode生成二维码支持中文带图片的操作请看二楼的帖子,当然开始需要下载一下C#Qrcode的源码 下载地址 : http://www.codeproject.com/Articles/2057 ...

  7. python_使用qrcode生成二维码

    1.功能 使用qrcode生成二维码 2.代码 #生成二维码: import qrcode #根据url生成二维码 def qrcodeWithUrl(url): img = qrcode.make( ...

  8. QRCode生成二维码，jq QRCode生成二维码，QRCode生成电子名片

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

  9. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

随机推荐

  1. struts2 之 struts2数据处理

    开门见山,struts2的数据处理总结: 1. 在servlet中,如果要获取页面提交的数据要使用requerst.getParameter方法来获取,并且每次需要进行相关的类型转换工作,数据的获取及 ...

  2. 关于 __proto__和prototype的一些理解

    var Person = function(name) {}; Person.prototype.say = function() { console.log("Person say&quo ...

  3. 简单介绍关于IOS的生命周期过程

    初步了解一下生命周期的过程: 1.通过alloc init 分配内存,初始化controller. 2.loadViewloadView方法默认实现[super loadView]如果在初始化cont ...

  4. 【从无到有】JavaScript新手教程——2.分支结构和循环

    介绍完JS的简介和向量以及运算符,大家对JS也有了初步的了解和认识,今天带大家来看一下JS中常用的分支结构以及循环结构是怎么使用的 [JS中的分支结构] 一.[if-else结构] 1.结构写法: i ...

  5. Docker for Mac与IntelliJ Docker Integration插件的兼容性问题

    笔者在自己的Mac上安装的是Docker for Mac,而不是Docker Toolbox. 这两者最主要的区别在于Docker for Mac用HyperKit作为虚拟化解决方案而不是Virtua ...

  6. [原创]一种基于Python爬虫和Lucene检索的垂直搜索引擎的实现方法介绍

    声明:本文首发在博客园晨星落羽,Shulin_Cao和lvmememe首页,转载请注明出处. 前言 2016.5到2017.5,我们三人(lvmememe,Shulin_Cao,晨星落羽)共同完成了一 ...

  7. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  8. python之基础中的基础（三）

    1.类,类就像是负责特定项目的主管,交给主管干这件事情,主管可以让手下的人分别去完成自己该干的活,最后综合起来把结果交给主管传递出去,即完成任务. class Dog(): ""& ...

  9. node.js 中回调函数callback(转载),说的很清楚,看一遍就理解了

    最近在看 express,满眼看去,到处是以函数作为参数的回调函数的使用.如果这个概念理解不了,nodejs.express 的代码就会看得一塌糊涂.比如: 复制代码 代码如下: app.use(fu ...

  10. C++ 中的一些错觉

    1. 默认构造函数和不带参数的构造函数之间无联系 默认构造函数是编译器发现类不存在显式构造函数时自动生成的无参数的构造函数.同样,用户可以定义显示的无参数构造函数. 2. 在构造函数.析构函数中调用v ...