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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 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中基本符号及使用方法
2010/03/23 PHP
php页面防重复提交方法总结
2013/11/25 PHP
php获取url参数方法总结
2014/11/13 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
详解js中的几种常用设计模式
2020/07/16 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
部署Python的框架下的web app的详细教程
2015/04/30 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Anaconda入门使用总结
2018/04/05 Python
python编程使用协程并发的优缺点
2018/09/20 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python 中@property的用法详解
2020/01/15 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
护士实习自我鉴定
2013/10/22 职场文书
学生评语大全
2014/04/18 职场文书
共青团员自我评价范文
2014/09/14 职场文书
公司开除员工通知
2015/04/22 职场文书
无保留意见审计报告
2015/06/05 职场文书
导游词之张家口
2019/12/13 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers