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. GUI程序设计3

    16. 树(JTree)使用示例 例16.1 创建JTree示例. package GUI1; import java.awt.BorderLayout; import java.awt.Contai ...

  2. 什么是Copy-Only Backup? 为什么要用它?

    Copy-only backup是一种独立于传统SQL Backup方法的一种备份方式. 一般来说, 做一次数据库备份会影响到后面的备份和还原作业. 然而, 有时你需要为了某个特殊的目的而做一次备份但 ...

  3. 解决duilib使用zip换肤卡顿的问题（附将资源集成到程序中的操作方法）

    转载请说明原出处,谢谢~~ 今天在做单子是.客户要求做换肤功能,为此我专门写了一个换肤函数,而且把各种皮肤资源压缩为各个zip文件来换肤.可是客户反映程序执行缓慢,我測试后发现的确明显能够看出慢了不少 ...

  4. Android -- onWindowFocusChanged

    Android中获取手机屏幕的高度和宽度,我们知道在onCreate方法中获取到的值都是为0的,有人说可以在onClick方法中获取值,这个也是个方法 ,但在onWindowFocusChanged方 ...

  5. [转]VirtualBox 修改UUID实现虚拟硬盘复制

    -------------------------------------------------------------------- 原文:https://www.cnblogs.com/find ...

  6. HttpClient4.3.3 使用样例—获取静态资源

    HttpClient4.3.3 使用样例—获取静态资源 学习了:http://shihlei.iteye.com/blog/2067688

  7. Java 抽象类和接口有什么差别

    抽象类和接口有什么差别? 1. 抽象类在java语言中所表示的是一种继承关系,一个子类仅仅能继承一个父类.可是能够实现多个接口. 2. 在抽象类中能够拥有自己的成员变量和非抽象类方法,可是接口中仅仅能 ...

  8. UGUI 屏幕适配 导致 BoxCollider无效 解决记录

    从来没有做过一个完整的游戏,所以用UGUI来做个手游界的 " Hello World " - 微信打飞机.看起来easy做起来也碰到各种奇异的问题. 昨天导出安卓包之后,在我的MX ...

  9. (算法)Partition方法求数组第k大的数

    如题,下面直接贴出代码: #include <iostream> using namespace std; int Partition(int* A,int left,int right) ...

  10. js绝招

    1.JS判断 function IsDigit(cCheck) { //判断是否是数字return (('0'<=cCheck) && (cCheck<='9')); } ...