QRCode.js二维码生成并能长按识别


Posted in Javascript onOctober 16, 2018

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

首先引入QRCode.js文件,下载地址

如果生成二维码的信息是固定不变的,那么当然不需要如此这般,网上有好多现成的二维码生成器,直接用就好。

可是,我的需求是这样的,二维码用于在微信或QQ中分享,根据不同的用户信息分别生成不同的二维码,这样就不能偷懒,就得用代码生成了,并且生成的二维码支持长按识别进入。

话不多说,直接上干货:

html部分:

<div id="codeBox">
 <div id="qrDiv" style="display: none;"></div>
 <div id="qrcode"></div> 
</div>

js部分:实例化并进行参数设置:

var user_id="" //用户ID
user_id=getQueryString('user_id'); //获取user_id参数
var url= '' //请求url
  $(function(){
  //生成二维码
  var downUrl=url+user_id;
  var qrcode = new QRCode("qrDiv", {
    text: utf16to8(Url),
    render: "canvas", //渲染方式有table方式(IE兼容)和canvas方式
    width: 128,
    height: 128,
    typeNumber:-1,//计算模式
    colorDark : "#000000",   //前景色
    colorLight : "#ffffff",   //背景色
    correctLevel : QRCode.CorrectLevel.H   //容错级别
  });
  var mycanvas1=document.getElementsByTagName('canvas')[0];
  //将转换后的img标签插入到html中 
  var img=convertCanvasToImage(mycanvas1); 
   $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id    
  })

  //从 canvas 提取图片 image 
  function convertCanvasToImage(canvas) { 
  //新Image对象,可以理解为DOM 
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 
    // 指定格式 PNG 
  image.src = canvas.toDataURL("image/png"); 
    return image; 
  } 

  //获取请求参数值
  function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null; 
   }

  //中文编码格式转换
  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;
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
详解ESLint在Vue中的使用小结
Oct 15 #Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 #Javascript
javascript匿名函数中的'return function()'作用
Oct 15 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
六道php面试题附答案
2014/06/05 面试题
大学毕业感言50字
2014/02/07 职场文书
平面设计求职信
2014/03/10 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
四年级语文教学反思
2016/03/03 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android