//js引用部分
<script src="../qrcode.js" type="text/javascript"></script> //body部分
<div class="qrcode-canvas" style="display: none;"></div>
<div class="qrcode-box">
<img src="" class="qrcode hide">
<div><img src="../common/images/logo.png" class="icon"></div>
</div> //js部分
//设置二维码跳转的url
var QrUrl = location.origin+global.basePath+'/dance/danceAddMember.html?teamId='+data.content.teamId;
//设置手动添加跳转的url
$('.dance-add-member-box .add-btn').attr('href',QrUrl);
//使用canvas生成二维码
var qrcodeCanvas = $('.qrcode-canvas');
qrcodeCanvas.qrcode({correctLevel: 0,text:QrUrl}).hide();
//获取canvas对象
var canvas = qrcodeCanvas.find('canvas').get(0);
//转换base输出到img中
$('.qrcode-box .qrcode').attr('src',canvas.toDataURL('image/jpg')).show();

qrcode.js扫码邀请的更多相关文章

  1. Vue使用QRCode.js生成二维码

    1.安装qrcode npm install qrcode 2.组件中引入qrcode import QRCode from 'qrcode' 3.html代码 <div><span ...

  2. 初涉扫码登录:edusoho实现客户端扫码登录(简版)

    一.项目简介及需求 edusoho是一套商业版的在线教育平台,项目本身基于symfony2框架开发,现在有一款自己的APP,要求在不多修改edusoho自身代码的基础上,实现客户端对PC端扫码登录.不 ...

  3. 利用vcard和qrcode.js生成二维码导入联系人

    vCard是一种容许交换个人信息的数据规范,vCard数据格式的标识符是VCARD,vCard数据格式行是: 类型 [;参数]:值,具体的介绍百度都有,我们可以通过vcard来进行通讯录的保存,名片的 ...

  4. Blazor组件自做三 : 使用JS隔离封装ZXing扫码

    Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写 ...

  5. Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...

  6. 动态生成二维码插件 jquery.qrcode.js

    前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...

  7. node.js Websocket实现扫码二维码登录---GoEasy

    最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...

  8. QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...

  9. jQuery.qrcode.js客户端生成二维码,支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

随机推荐

  1. vue 练习 bug

    在使用vue slot分发内容时,如果要绑定事件,不能绑定在slot元素上,同样的不能绑定在自定义元素的模板上,只能绑定在html 元素上,才会生效 demo <my-component v-o ...

  2. 转:Oculus Unity Development Guide开发指南(2015-7-21更新)

    http://forum.exceedu.com/forum/forum.php?mod=viewthread&tid=34175 Oculus Unity Development Guide ...

  3. Android buffer_handle_t的定义(转载)

    转自:http://www.cnblogs.com/eustoma/archive/2012/06/08/2541416.html 1. buffer_handle_t 文件位置:system\cor ...

  4. Jquery 之deferred

    一.概述 在jquery中有种对象称之为延时对象,可以由 http请求方法$.get(), $.ajax(), $.post()  产生, 内置方法如下 也可以有jquery的延时方法 $.when( ...

  5. ios http2客户端访问nginx失败bug

    我们将项目迁入腾讯云后,外网访问流量转发如下外网--->大禹BGP(BGPAntiDDoS)高防---->lbc(LoadBalance cluster)---->lb-----&g ...

  6. python 面向对象二 类和实例

    一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...

  7. bzoj 1042: [HAOI2008]硬币购物【容斥原理+dp】

    当然是容斥啦. 用dp预处理出\( f[i] \),表示在\( i \)价格时不考虑限制的方案数,转移方程是\( f[i]+=f[i-c[j]] \),用状压枚举不满足的状态容斥一下即可. #incl ...

  8. codeforces912E(折半搜索+双指针+二分答案)

    E. Prime Gift E. Prime Gift time limit per test 3.5 seconds memory limit per test 256 megabytes inpu ...

  9. [Usaco2012 Open]Balanced Cow Subsets

    Description Farmer John's owns N cows (2 <= N <= 20), where cow i produces M(i) units of milk ...

  10. [Usaco2005]Part Acquisition

    Description The cows have been sent on a mission through space to acquire a new milking machine for ...