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 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
关于js遍历表格的实例
Jul 10 Javascript
javascript操作ul中li的方法
May 14 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
移动端图片上传旋转、压缩问题的方法
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
层叠菜单的动态生成
2006/10/09 PHP
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
php 引用(&amp;)详解
2009/11/20 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
PHP7变量处理机制修改
2021/03/09 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JS获取时间的方法
2015/01/21 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
详解Python的单元测试
2015/04/28 Python
Python中元组,列表,字典的区别
2017/05/21 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python中Unittest框架的具体使用
2019/08/27 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
解决python replace函数替换无效问题
2020/01/18 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
内科护士实习自我鉴定
2013/10/17 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
安全演讲稿大全
2014/05/09 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
运动会演讲稿50字
2014/08/25 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
会计岗位职责
2015/02/03 职场文书
2015年教务工作总结
2015/05/23 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python
Django框架中模型的用法
2022/06/10 Python