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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
Oct 12 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
Vue从TodoList中学父子组件通信
Feb 05 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 上传文件的方法(类)
2009/07/30 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
python中类的属性和方法介绍
2018/11/27 Python
python单例设计模式实现解析
2020/01/07 Python
Python unittest框架操作实例解析
2020/04/13 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
摄影实习自我鉴定
2013/09/20 职场文书
九年级物理教学反思
2014/01/29 职场文书
委托公证书
2014/04/08 职场文书
C++程序员求职信范文
2014/04/14 职场文书
初中英语演讲稿
2014/04/29 职场文书
商标侵权律师函
2015/05/27 职场文书
无工作证明怎么写
2015/06/15 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏