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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
微信小程序实现底部导航
Nov 05 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 Javascript
video.js添加自定义组件的方法
Dec 09 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Python脚本实现虾米网签到功能
2016/04/12 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python实现交并比IOU教程
2020/04/16 Python
python的Jenkins接口调用方式
2020/05/12 Python
python实现canny边缘检测
2020/09/14 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
美国电视购物:QVC
2017/02/06 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
艾滋病宣传活动总结
2014/05/08 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
辩护词范文大全
2015/05/21 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python