二维码插件qrcode生成二维码信息

文章目录

二维码插件qrcode：
- JS逻辑实现：
- html展示与下载调用部分：
- 图片信息展示如下：

二维码插件qrcode：

JS逻辑实现：

 <!-- 二维码插件，qrcode.min.js下载请百度搜索即可 --><script type="text/javascript" src="../js/qrcode.min.js"></script><script type="text/javascript">//主函数，所有的页面写js一上来都要写主函数//在js中{}代表对象var qrcode;//全局变量window.onload = function() {//不能写localhost，要写真是的ip地址//你的项目在你的电脑上，你的微信在你的手机//要保证你的电脑和你的手机用的是同一个局域网//创建局域网：手机热点，电脑连接//再使用ipconfig查询ip地址，填入qrcode = new QRCode(document.getElementById("qrcode"), {text : "http://192.168.46.218:8080/hpl/main.html?uid=56",width : 128, //生成的二维码的宽度height : 128,//生成的二维码的高度colorDark : "#0000ff", // 生成二维码的深色部分colorLight : "#ffffff", //生成二维码的浅色部分correctLevel : QRCode.CorrectLevel.H});}function download(qrcodeUrl, qrcodeName) {qrcode.clear();//清空之前生成的二维码，之前的不要了qrcode.makeCode(qrcodeUrl);//重新生成新的二维码//因为生成二维码是一个算法执行过程，需要消耗一定的时间setTimeout(function() {//回调函数：等待100ms//实现下载过程，使用a标签下载//但二维码手机动态生成的，需要在点击a标签之前var img = document.getElementById('qrcode').getElementsByTagName('img')[0];//alert(img);//使用canvas画布进行转换，得到href的网址var canvas = document.createElement('canvas');canvas.width = img.width;canvas.height = img.height;//画布的宽度和高度=二维码图片的宽度和高度canvas.getContext('2d').drawImage(img, 0, 0);//在画布的左上顶点进行画画，画二维码图片var url = canvas.toDataURL('image/png');//通过画布得到所画图片的路径//alert(url);var a = document.getElementById('download');a.setAttribute('href', url);a.setAttribute('download', qrcodeName + '二维码.png');//下载的图片改名a.click();//使用js触发a标签的点击事件}, 100);//等待100ms}</script>

html展示与下载调用部分：

<!-- style="display: none"表示二维码不展示，我们需要二维码时需要去除该属性 --><div id="qrcode" style="display: none"></div>  <!-- 下载二维码，注意传入的分别为qrcodeUrl, qrcodeName表示二维码打开链接与二维码下载名称 --><a class="btn btn-default btn-xs"href="javascript:download('http://192.168.46.218:8080/hpl/user/detail?id=${bean.id }','${bean.username }')">详情</a>

图片信息展示如下：

二维码插件qrcode生成二维码信息相关推荐

使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法参考文章: (1)使用jQuery的插件qrcode生成二维码(静态+动态生成)及常见问题解决方法 (2)https: ...
网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码
最近几年二维码的广泛应用,方便了很多行业,如支付宝,微信,小程序扫码之类的,这个在二十年前,想都不敢想这么方便,那时候有书刊编码扫一扫都感觉是高科技了,如今,二维码的广泛应用,生活还是方便了不少!这个 ...
Vue使用QRCode插件，生成二维码
Vue使用qrcode插件,生成二维码简单的生成二维码: 1.使用vue脚手架工具生成一个vue项目(这不做具体解释,可自己去观看有关视频或者文档) 2.创建一个vue模块QRCode.vue 3. ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue 中生成带logo的二维码vue-qr(可换背景) 利用qrcode生成二维码
vue 中生成带logo的二维码这里运用了一个插件 vue-qr npm install vue-qr --save <template><div><vue-qr :c ...
C# 利用QRCode生成二维码图片
网上生成二维码的组件是真多,可是真正好用的,并且生成速度很快的没几个,QRCode就是我在众多中找到的,它的生成速度快.但是网上关于它的使用说明,真的太少了,大都是千篇一律的复制粘贴.这是本要用它做了 ...
如何利用ThoughtWorks.QRCode 生成二维码
1.引用ThoughtWorks.QRCode.dll 在nuget上查找即可引用,也可自行下载 2.生成二维码静态方法参数: 二维码内容:fileUrl 二维码图片名:typeName #regi ...
关于QRCode生成二维码（背景图、Logo）
关于QRCode生成二维码的代码 /// <summary> /// 创建二维码 /// </summary> /// <param name="QRStrin ...
php使用Qrcode生成二维码
php使用Qrcode生成二维码首先检查php.ini Gd 库要打开 use QrCode; //控制器引用public function index(){include 'phpqrcode.p ...

二维码插件qrcode生成二维码信息

文章目录

二维码插件qrcode：

JS逻辑实现：

html展示与下载调用部分：

图片信息展示如下：

二维码插件qrcode生成二维码信息相关推荐

最新文章

热门文章