jquery.qrcode.js生成二维码(前端生成二维码)
官网地址:http://jeromeetienne.github.io/jquery-qrcode/
第一步引入插件:
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
第二步 写一个dom
<div id="qrcode"></div>
第三步 生成
$('#qrcode').qrcode("string");
ok,生成
上面是一个简单的生成二维码操作,下面进一步了解
参数说明
text : "https://github.com/jeromeetienne/jquery-qrcode" //设置二维码内容
render : "canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)
width : 256, //设置宽度
height : 256, //设置高度
typeNumber : -1, //计算模式
correctLevel: 0,//纠错等级
background : "#ffffff",//背景颜色
foreground : "#000000" //前景颜色
生成一个:
            $('#qrcode').qrcode({
                render:"canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)
                width: 200,//宽度
                height: 200,//高度
                correctLevel:0,//纠错等级
                text: "https://i.cnblogs.com/EditPosts.aspx?postid=11116934",//生成二维码的文本
                background:"#00FF00",//背景色
                foreground:"#FFFF00",//前景色
            });
遇见问题:
1、发现带上背景色,前景色,生成的二维码不好扫描,于是干脆不带,就生成黑白的就挺好
2、中文乱码问题:
query-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的,这个方法默认会获取它的 Unicode 编码,一般的解码器都是采用UTF-8, ISO-8859-1等方式。
英文是没有问题,如果是中文,一般情况下Unicode是UTF-16实现,长度2位,而UTF-8编码是3位,这样二维码的编解码就不匹配了。
 解决方式当然是,在二维码编码前把字符串转换成UTF-8,具体代码如下:
        generateQrcode(){
            var self=this;
            $('#qrcode').qrcode({
                render:"canvas",//设置渲染方式 (有两种方式 table和canvas,默认是canvas)
                width: 200,//宽度
                height: 200,//高度
                correctLevel:0,//纠错等级 纠错级别,可取0、1、2、3,数字越大说明所需纠错级别越大
                text: self.utf16to8("中文"),//生成二维码的文本
            });
        },
        utf16to8(str) { //二维码编码前把字符串转换成UTF-8
            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;
        }
jquery.qrcode.js生成二维码(前端生成二维码)的更多相关文章
- jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO
		
描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较 ...
 - jquery二维码生成插件jquery.qrcode.js
		
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
 - jQuery生成二维条形码 jquery.qrcode.js
		
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
 - JavaScript-Tool:jquery.qrcode.js
		
ylbtech-JavaScript-Tool:jquery.qrcode.js 1.返回顶部 1. 插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jqu ...
 - 动态生成二维码插件  jquery.qrcode.js
		
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
 - 使用jquery.qrcode.js生成二维码
		
通常生成二维码的方式有两种:第一种是java代码的形式,第二种是通过Js方式. 在这里我做个记录,用js生成二维码,可以在官网下载源码:http://jeromeetienne.github.io/j ...
 - 如何使用jquery.qrcode.js插件生成二维码
		
1.首先需要准备 jquery.qrcode.js 和 jquery.js github地址:https://github.com/lrsjng/jquery-qrcode 官方文档地址:http:/ ...
 - 生成二维码的 jQuery 插件:jquery.qrcode.js的中文乱码问题
		
在使用jquery.qrcode.js这个插件生成二维码的时候发现并不能识别中文. 原因在于:jquery-qrcode是采用charCodeAt()方式进行编码转 换的. 而这个方法默认会获取它的U ...
 - 修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
		
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
 - 基于jquery类库的绘制二维码的插件jquery.qrcode.js
		
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
 
随机推荐
- jsp页面报错,各种错误码意思
			
基本原则: 2xx = Success(成功) 3xx = Redirect(重定向) 4xx = User error(客户端错误) 5xx = Server error(服务器端错误) 状态码 ( ...
 - 关于FSM的C语言实现与详解
			
最近一个项目有一个需求,考量了一下决定使用状态机,实现完需求以后,不得不感慨,状态机在处理逻辑上面实现起来很有优势,也便于管理. 在这里分享一下我所修改的状态机实现.改动的地方不多,参考了<C语 ...
 - Mysql数据库的优化(本文摘自于网络,文章末端有原文链接)
			
对于一个以数据为中心的应用,数据库的好坏直接影响到程序的性能,因此数据库性能至关重要.一 般来说,要保证数据库的效率,要做好以下四个方面的工作: ① 数据库设计 ② sql语句优化 ③ 数据库参数配置 ...
 - MySql 8.0.11 客户端连接失败:2059 - Authentication plugin 'caching_sha2_password' cannot be loaded: ....
			
近期,换了新笔记本,重新安装了MySql数据库和客户端工具Navicat Premium 12.我是从官网上下载的MySql数据库,版本为8.0.11,链接:https://dev.mysql.com ...
 - MySQL去除查询结果重复值
			
下面先来看看例子: table id name 1 a 2 b 3 c 4 c 5 b 库结构大概这样,这只是一个简单的例子,实际情况会复杂得多. 比如我想用一条语句查询得到name不重复 ...
 - [转载]机器学习优化方法总结:SGD,Momentum,AdaGrad,RMSProp,Adam
			
[转载]机器学习优化方法总结:SGD,Momentum,AdaGrad,RMSProp,Adam https://blog.csdn.net/u010089444/article/details/76 ...
 - 如何爬取icourse163 中国慕课上课程信息(上),
			
中国大学MOOC网上有着特别完善的课程信息,我觉得这是一份可以让我们充分利用的资源 那么,接下来的问题就是我们该如何爬取这里的资源 选择其中的计算机课程进行尝试 import requests fro ...
 - 浏览器本质上是解析器javascript
			
浏览器本质上是解析器.用于将符合W3C的标记序列解析并还原到编码人员希望用户看到的呈现状态.实际上,Word本身也可以看作是一个文档文件浏览器,acdsee是一个图像文件解析器(浏览器).HTML文件 ...
 - 微信小程序手动实现select下拉框选择
			
在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...
 - easyui的combobox默认选中第一个选项
			
pmProjectSelect.combobox({ editable:false, width:165, url : ctx + '/PmProject/findByProjectMgr', //c ...