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_08_函数对象
Oct 15 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
小程序自定义轮播图圆点组件
Jun 25 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
php获得文件扩展名三法
2006/11/25 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php图片添加水印例子
2016/07/20 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
关于js datetime的那点事
2011/11/15 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
社区扶贫帮困工作总结
2015/05/20 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA