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读取xml
Nov 04 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
详解es6新增数组方法简便了哪些操作
May 09 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
基于empty函数的判断详解
2013/06/17 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP7新特性
2021/03/09 PHP
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python自动化测试三部曲之request+django实现接口测试
2020/10/07 Python
python sleep和wait对比总结
2021/02/03 Python
物业公司采购员岗位职责
2013/12/31 职场文书
奔腾年代观后感
2015/06/09 职场文书
少儿励志名言(80句)
2019/08/14 职场文书