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. Web Sessions Installation

    展示不使用Terracotta DSO如何集群Web Sessions. 1.要求 1)jdk1.6或者更高版本 2)Terracotta 3.7或者更高版本 3)所有被集群的对象需要实现序列化,如果 ...

  2. UILabel混合显示动画效果

    UILabel混合显示动画效果 效果 源码 https://github.com/YouXianMing/Animations // // MixedColorProgressViewControll ...

  3. ping + 时间 日志

    :top set PINGIP="192.168.1.236" echo %date% %time%>>%PINGIP%.txt ping -n 1 %PINGIP% ...

  4. tornado基础入门（一）——简单了解tornado

    参考:http://demo.pythoner.com/itt2zh/ch1.html tornado是一个轻量级的web框架,是一个用python写的web服务器,它有三个最大的特点(优势)速度.简 ...

  5. 怎样通过terminal得到AWS EC2 instance的ip

    可得到private ip,也是本地的ip.事实上通过ifconfig也能得到: GET http://169.254.169.254/latest/meta-data/local-ipv4 公共ip ...

  6. 在Java Web程序中使用Hibernate

    在Java Web程序中使用Hibernate与普通Java程序一样.本文中将使用Servlet和JSP结合Hibernate实现数据库表的增删改查操作. Web程序中,hibernate.cfg.x ...

  7. Java:IO流的综合用法(从键盘录入数据并打印在控制台上)

    import java.io.*; public class IOTestDouble { public static void main(String[] args)throws Exception ...

  8. WhyEngine游戏合集2014贺岁版

    WhyEngine游戏合集2014贺岁版 自去年9月份开始写我的第一个小游戏,到现在为止,共实现了14个小游戏,10个屏保程序,7个DEMO程序.开发环境是VS2008,渲染使用的是D3D,所有代码都 ...

  9. OTL翻译(6) -- otl_connect类

    otl_connect 这个类封装了连接的功能,如连接.断开连接.提交.回滚等.otl_connect也就是一个用来创建连接对象并进行管理的类. 序号 方法.变量 说明 1 int connected ...

  10. go语言基础之append扩容特点

    1.append扩容特点 示例: package main //必须有个main包 import "fmt" func main() { //如果超过原来的容量,通常以2倍容量扩容 ...