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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
vue的hash值原理也是table切换实例代码
Dec 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
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
python生成特定分布数的实例
2019/12/05 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
深入了解NumPy 高级索引
2020/07/24 Python
Python如何操作docker redis过程解析
2020/08/10 Python
德国网上超市:myTime.de
2019/08/26 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
菜篮子工程实施方案
2014/03/08 职场文书
端午节演讲稿
2014/05/23 职场文书
自荐信模板大全
2015/03/27 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
《观潮》教学反思
2016/02/17 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang