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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
基于jQuery的计算文本框字数的代码
Jun 06 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
javascript中apply/call和bind的使用
Feb 15 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
axios异步提交表单数据的几种方法
Aug 11 Javascript
详解Js模块化的作用原理和方案
Apr 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
由php if 想到的些问题
2008/03/22 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
谈谈如何手动释放Python的内存
2016/12/17 Python
python求最大连续子数组的和
2018/07/07 Python
Python异常处理操作实例详解
2018/08/28 Python
解析Python的缩进规则的使用
2019/01/16 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
视光学毕业生自荐书范文
2014/02/13 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
效能监察建议书
2014/05/19 职场文书
小学语文复习计划
2015/01/19 职场文书
黄石寨导游词
2015/02/05 职场文书
2014年终个人总结报告
2015/03/09 职场文书
刑事法律意见书
2015/06/04 职场文书
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
pandas中对文本类型数据的处理小结
2021/11/01 Python
解决Redis启动警告问题
2022/02/24 Redis
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python