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. .NET：通过 CAS 来理解数据库乐观并发控制，顺便给出无锁的 RingBuffer。

    背景 大多数企业开发人员都理解数据库乐观并发控制,不过很少有人听说过 CAS(我去年才听说这个概念),CAS 是多线程乐观并发控制策略的一种,一些无锁的支持并发的数据结构都会使用到 CAS,本文对比 ...

  2. jsp中excel文件的创建与读取

    1.创建excel文件//这里的jxl不是java的标准jar包,需要在项目中另外加载 import jxl.Workbook; import jxl.write.Label; import jxl. ...

  3. win7下安装配置ftp服务器

    1. win7操作系统自带了ftp组件,所以不需要另外下载.只需要在控制面板中,添加或删除组件中启用即可. 2. 在管理上,ftp和iis是属于同一个目录的.ftp也可以算是internet info ...

  4. [翻译] Core Text Objective-C Wrapper

    Core Text Objective-C Wrapper https://github.com/akosma/CoreTextWrapper Introduction(介绍) One of the ...

  5. 使用开源库 MBProgressHUD 等待指示器

    source https://github.com/jdg/MBProgressHUD MBProgressHUD is an iOS drop-in class that displays a tr ...

  6. @JVM中对象的引用类型

    JVM中有四种引用类型:强引用.软引用.弱引用.虚引用   强引用(Stong Reference):是指在程序代码中普遍存在的,类似:Object obj = new Object()这类的引用,只 ...

  7. go语言基础之new函数

    1.new函数 表达式new(T)将创建一个T类型的匿名变量,所做的是为T类型的新值分配并清零一块内存空间,然后将这块内存空间的地址作为结果返回,而这个结果就是指向这个新的T类型值的指针值,返回的指针 ...

  8. Merge Sorted Array leetcode java（回顾MergeTwoArray和MergeTwoLinkedList）

    题目: Given two sorted integer arrays A and B, merge B into A as one sorted array. Note: You may assum ...

  9. jwplayer 隐藏属性方法记载

    jwplayer().getPosition(): //播放了多少秒 jwplayer('playerdiv').play(); || jwplayer(0).play(true / false); ...

  10. IOS info.plist配置文件

    创建ios程序时,系统会自动生成一个info.plist文件,它是一个必不可少的文件,因为在这个文件中,存放是应用程序的配置信息,比如本地化语言.版本号.软件名称等,当然,我们也可以在项目的属性中进行 ...