由于一个坑爹的项目需要生成二维码扫描，后台由于数据库比较麻烦，就只能前端做了，于是乎找到Js生成qrcode的一个库：https://github.com/jeromeetienne/jquery-qrcode，试用了下感觉挺方便的，做个记录。

这是Jquery的一个插件，需要用到Jquery。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>QRCODE TEST</title>

 </head>

 <body>

     <div id="code"></div>

 </body>

 <script src="./jquery/jquery.js"></script>

 <script src="./jquery/jquery.qrcode.min.js"></script>

 <script>

     function changeToUtf8(str) {

     var output, i, len, c;

     output = "";

     len = str.length;

     for(i = 0; i < len; i++) {

         c = str.charCodeAt(i);

         if ((c >= 0x0001) && (c <= 0x007F)) {

             output += str.charAt(i);

         } else if (c > 0x07FF) {

             output += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));

             output += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));

             output += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));

         } else {

             output += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));

             output += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));

         }

     }

     return output;

 }

     var str=changeToUtf8("尼玛");

     $("#code").qrcode({

         render:"table",

         width:200,

         height:200,

         text:str

     });

 </script>

 </html>

之所以需要个changeToUft8函数是因为中文字符直接生成二维码再进行扫描读取的话会乱码，qrcode是采用charCodeAt()进行转码的，默认是unicode编码。

jquery.qrcode笔记的更多相关文章

  1. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  2. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  3. Jquery.Qrcode在客户端动态生成二维码并添加自定义Logo

    0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服 ...

  4. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. jquery.qrcode 生成二维码带logo

    <div id="container">这里是二维码显示位置</div> <script language="JavaScript" ...

  7. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  9. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

随机推荐

  1. Python——Pandas 时间序列数据处理

    介绍 Pandas 是非常著名的开源数据处理库,我们可以通过它完成对数据集进行快速读取.转换.过滤.分析等一系列操作.同样,Pandas 已经被证明为是非常强大的用于处理时间序列数据的工具.本节将介绍 ...

  2. 14 微服务电商【黑马乐优商城】：day02-springcloud(理论篇四：配置Robbin负载均衡)

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  3. Matlab高级教程_第三篇：Matlab转码C/C++方式(混编)_第二部分

    这一部分通过一些实例来进行转码和调试的讲解: 1. 输入变量.输出变量和过程内变量的内存预分配 函数代码:函数名test function [A,B] = test( mark,num,array ) ...

  4. set|lambda|reduce

    #!/usr/bin/python a=set([i for i in range(4,8)]) b=set([i for i in range(5,12)]) c= sorted(a & b ...

  5. python之os和sys模块的区别

    一.os模块 os模块是Python标准库中提供的与操作系统交互的模块,提供了访问操作系统底层的接口,里面有很多操作系统的函数 1.os常用方法 import os # print(os.getcwd ...

  6. BZOJ 2318: Spoj4060 game with probability Problem (概率dp)(博弈论)

    2318: Spoj4060 game with probability Problem Description Alice和Bob在玩一个游戏.有n个石子在这里,Alice和Bob轮流投掷硬币,如果 ...

  7. DataGrip设置时区

    新版本DataGrip以默认时区取世界标准时间.要想时间显示正常,需要将时区变为上海时区,可手动在连接配置里设置参数.如下图: 操作步骤1.右键打开你想要修改的数据库连接的Properties菜单:2 ...

  8. String截取字符串的指定字节长度

    /** TODO:截取字符串的指定字节长度 * @Author wenjing * @Date 11:02 2019/5/15 * @Param [str, bengin, end] * @retur ...

  9. BucketSort（桶排序）原理及C++代码实现

    桶排序假设输入数据服从均匀分布,平均情况下它的时间复杂度为O(n). 桶排序将输入数据的区间均匀分成若干份,每一份称作“桶”.分别对每一个桶的内容进行排序,再按桶的顺序输出则完成排序. 通常使用链表来 ...

  10. iOS仿抖音节拍界面、Swift，MVVM架构完整项目、日历demo、滚动切换分类等源码

    iOS精选源码 在Object-C中学习数据结构与算法之排序算法 日历-基本功能都有的日历 选择日期 上下月 动画 仿抖音卡节拍界面 垂直.水平方向皆可滚动.header悬浮的列表视图 Auto La ...