1、先简单说一下jquery-qrcode，这个开源的三方库（可以从https://github.com/jeromeetienne/jquery-qrcode 获取），

qrcode.js 是实现二维码数据计算的核心类，

jquery.qrcode.js 是把它用jquery方式封装起来的，用它来实现图形渲染，其实就是画图（支持canvas和table两种方式）

效果图：

支持的功能主要有：

content : "http://www.baidu.com"  //设置二维码链接

其他默认参数：

render   : "canvas",//设置渲染方式

width       : 256,     //设置宽度

height      : 256,     //设置高度

typeNumber  : -1,      //计算模式

correctLevel    : QRErrorCorrectLevel.H,//纠错等级

background      : "#ffffff",//背景颜色

foreground      : "#000000" //前景颜色

使用方式非常简单->demo：1、引入jquery（毫无疑问）2、分别引入jquery.qrcode.js和qrcode.js   3、使用div，$("#qrcode").qrcode("http://www.baidu.com");

<html>

<head>

  <title>JS前端qrcode生成二维码</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

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

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

</head>

<body>

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

<script type="text/javascript">

$("#qrcode").qrcode({width:200,height:200,correctLevel:0,text:"http://www.baidu.com"});

</script>

</body>

</html>

TIPS：默认使用canvas方式渲染性能还是非常不错的。

二、支持中文二维码

其实上面的js有一个小小的缺点，就是默认不支持中文。

这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，

而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，

英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式当然是，在二维码编码前把字符串转换成UTF-8，具体代码如下：

function utf16to8(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;

}

【QRcode二维码】：使用JS前端插件QRcode.js生成二维码的更多相关文章

  1. web端分享网页到各个网站JS代码（微信为生成二维码）

    /*分享到新浪微博,QQ空间,人人网,生成二维码*/ var myTitle=$("title").text(); var myHref = window.location.hre ...

  2. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  3. js 根据所输内容生成助记码

      js生成与中文字符串相对映的拼音首字母串 CreateTime--2017年7月14日16:35:31Author:Marydon 需要工具js文件letter.js,代码如下: /** 作者:梅 ...

  4. 前端插件--swiper.js

    使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件: swiper官方文档:http://www.swiper.com.cn/api/effects/193.html 实例 ...

  5. 前端插件--swipe.js

    swipe.js的作用: 这是一个轻量级的移动滑动组件,支持触摸移动,支持响应式页面. 效果图: 代码: <!DOCTYPE html> <html lang="en&qu ...

  6. js 统计图插件chart.js

    chart是一个纯js插件,它功能强大小巧使用也很简单. 第一步引入 chart.js . <script type="text/javascript" src=" ...

  7. js前端数据验证JS工具

    var regexEnum = { intege : "^-?[1-9]\\d*$", // 整数 intege1 : "^[1-9]\\d*$", // 正整 ...

  8. jquery.qrcode.min.js生成二维码

    jquery.qrcode.min.js是一款可以生成二维码的插件,使用前提是先引入jquery,因为jquery.qrcode.min.js依赖jquery. 基本用法 1.引入js <scr ...

  9. Vue使用QRCode.js生成二维码

    1.安装qrcode npm install qrcode 2.组件中引入qrcode import QRCode from 'qrcode' 3.html代码 <div><span ...

随机推荐

  1. SRM 624 D2L3: GameOfSegments, 博弈论，Sprague–Grundy theorem，Nimber

    题目:http://community.topcoder.com/stat?c=problem_statement&pm=13204&rd=15857 这道题目须要用到博弈论中的经典理 ...

  2. visio 画类图时 方法里如何加参数

    鼠标双击类(打开属性对话框)-->(类别)操作-->属性-->(类别)参数-->(添加参数)

  3. Python3.6学习笔记（五）

    网络编程 网络程序出现的比互联网要早很多,实现方式主要依靠网络上不同主机间进程的通信,通信协议最重要的是TCP/IP协议.在这两个协议基础上还有很多更高级的协议,包括HTTP.SMTP等.要进行两个主 ...

  4. react random key generator；react如何产生随机不重复的key

    1.<div key={+new Date() + Math.random()}> 2.使用数组的索引 3.使用uuid:https://www.npmjs.com/package/uui ...

  5. 使用Jenkins和Jmeter搭建性能测试平台

    参考文档:http://blog.csdn.net/liuchunming033/article/details/52186157 jenkins的性能测试结果展现插件:https://wiki.je ...

  6. (转载)ios的一些知识点

    ios的一些知识点 一 非ARC的内存管理情况  1-autorelease,当用户的代码在持续运行时,自动释放池是不会被销毁的,这段时间内用户可以安全地使用自动释放的对象.当用户的代码运行告一 段落 ...

  7. 网页IE轻松调用VLC播放器实现监控（组件+方法大全）【转】

    公司突发奇想,要把刚买回来的网络监控机用自己内部网站在线监控. 作为网站的开发员,我接下了这个任务. 网络上有很多资料参与,但是都不全都不尽人意,最后经过多次的不同关键字的查找和测试,总算让我成功了. ...

  8. Depth of field --Circle of confusion 推导

    https://en.wikipedia.org/wiki/Circle_of_confusion https://developer.download.nvidia.com/books/HTML/g ...

  9. 解决LayoutItem lable 太长的问题

    <Style TargetType="dxlc:LayoutItem"> <Setter Property="AddColonToLabel" ...

  10. [Node.js] Load balancing a Http server

    Let's see how to do load balancing in Node.js. Before we start with the solution, you can do a test ...