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 相关文章推荐
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
AngularJS内置指令
Feb 04 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
JS运算符简单用法示例
Jan 19 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 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写杨辉三角实例代码
2011/07/17 PHP
PHP编程风格规范分享
2014/01/15 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jQuery 选择器理解
2010/03/16 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Vue程序调试的方法
2019/06/17 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
python求解水仙花数的方法
2015/05/11 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
关于青春的演讲稿
2014/05/05 职场文书
校车安全管理责任书
2015/05/11 职场文书
初一军训感言
2015/08/01 职场文书
七个Python必备的GUI库
2021/04/27 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS