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 相关文章推荐
关于IFRAME 自适应高度的研究
Jul 20 Javascript
javascript中获取选中对象的类型
Apr 02 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
js的对象与函数详解
Jan 21 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
浅析php header 跳转
2013/06/17 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python yield 使用方法浅析
2017/05/20 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
房地产开发项目建议书
2014/05/16 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书