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 相关文章推荐
javascript中String类的subString()方法和slice()方法
May 24 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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中文分词的简单实现代码分享
2011/07/17 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python小技巧之批量抓取美女图片
2014/06/06 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python实现简单图书管理系统
2019/11/22 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Django values()和value_list()的使用
2020/03/31 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
军人违纪检讨书
2014/02/04 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
JavaScript实现音乐播放器
2022/08/14 Javascript