今天我要和大家分享的是利用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. require.js入门

    小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...

  2. MySQL关于check约束无效的解决办法

    首先看下面这段MySQL的操作,我新建了一个含有a和b的表,其中a用check约束必须大于0,然而我插入了一条(-2,1,1)的数据,其中a=-2,也是成功插入的. 所以MySQL只是check,但是 ...

  3. druid 连接kafuk

    java -Xmx256m -Duser.timezone=UTC -Dfile.encoding=UTF-8 -Ddruid.realtime.specFile=examples/indexing/ ...

  4. vue-router2 使用

    VUE-ROUTER2  API http://router.vuejs.org/zh-cn/api/router-link.html   1,安装vue-router npm install vue ...

  5. html5脚本编程

    (1)跨文档消息传递,XDM.指的是来自不同域的页面间传递消息. XDM的核心是postMessage();向另一个地方传递数据,指是包含在当前页面中的iframe元素,由当前页面弹出的窗口. var ...

  6. html 压缩工具 html-minifier

    https://github.com/kangax/html-minifier#options-quick-reference 1.参数列表 option Description Default re ...

  7. 使用Entity Framework时遇到的问题

    1.运行程序时提示 ,vension does not match. 差不多是这样一个提示,具体怎么样的给忘记了. #1remove 'entity framework' from reference ...

  8. JS比较思维模型

    在这里,要分享的JS中两种思维方式: 1)面向对象风格示例: function Foo(who){ this.me = who; } Foo.prototype.identify = function ...

  9. 容器 What, Why, How - 每天5分钟玩转容器技术（6）

    学习任何东西都可以按照3W的框架进行,容器技术也是一样,先回答 What.Why 和 How 这三个问题. What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在 ...

  10. 1. Skippr

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...