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. 使用spring中的@Transactional注解时，可能需要注意的地方

    前情提要 在编写业务层方法时,会遇到很多需要事务提交的操作,spring框架为我们提供很方便的做法,就是在需要事务提交的方法上添加@Transactional注解,比起我们自己开启事务.提交以及控制回 ...

  2. uva 10618 Tango Tango Insurrection 解题报告

    Tango Tango Insurrection Time Limit: 3000MS     64bit IO Format: %lld & %llu Submit Status uDebu ...

  3. OpenCV学习(29) 凸包(convexhull)

    在opencv中,通过函数convexHulll能很容易的得到一系列点的凸包,比如由点组成的轮廓,通过convexHull函数,我们就能得到轮廓的凸包.下面的图就是一些点集的凸包. 求凸包的代码如下: ...

  4. jQuery多文件下载

    文件下载是一个Web中非常常用的功能,不过你是做内部管理系统还是做面向公众的互联网公司都会遇到这个问题,对于下载一般有点实际开发经验的都会自己解决,上周弄了一下多文件下载,业务场景就是一条数据详细信息 ...

  5. mybatis 针对SQL Server 的 主键id生成策略

    SQL Server中命令: select newId()  ,可以得到SQL server数据库原生的UUID值,因此我们可以将这条指令写到 Mybatis的主键生成策略配置selectKey中. ...

  6. 让ie6(opera)支持微软雅黑字体

    一.让IE6支持微软雅黑,添加一句声明: <html  lang="zh-CN"> 在网页的HTML标签内加入红色部分的声明,就可以了. 二.让Opera浏览器支持微软 ...

  7. [Backbone] Parse JSON on Collection

    // Get /appointments{ "per_page": 10, "page": 1, "total": 50, "ap ...

  8. 九度OJ 1006 ZOJ问题 （这题測试数据有问题）

    题目1006:ZOJ问题 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:15725 解决:2647 题目描写叙述: 对给定的字符串(仅仅包括'z','o','j'三种字符),推断他能否AC ...

  9. Python访问PostGIS(建表、空间索引、分区表)

    #encoding: utf-8 __author__ = 'Administrator' import psycopg2 import ppygis import datetime import s ...

  10. hadoop伪分布集群搭建

    系统环境:ubuntu server16.04 1.root@master:~$ vim /etc/hostname #修改主机名 master 2.root@master:~$ reboot #重启 ...