如何在前端生成二维码
第一步:
引入:<script src="qrcode.js"></script>
第二步:
<div id="qrcode"></div>
第三步:
// 1.简单使用方式 :new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');
// 2.设置参数使用方式: var qrcode = new QRCode('qrcode', //document.getElementById('#qrcode');
{ text: 'http://www.baidu.com',
width: 256, height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
// 3使用 API
qrcode.clear();
qrcode.makeCode('new content');
总结:参数说明:
new QRCode(element, option)
element-显示二维码的元素或该元素的 ID
option参数配置
width256图像宽度height256图像高度typeNumber4colorDark"#000000"前景色colorLight"#ffffff"背景色
correctLevelQRCode.CorrectLevel.L容错级别,可设置为:
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
API 接口
名称 | 说明 |
---|---|
makeCode(text) | 设置二维码内容 |
clear() | 清除二维码。(仅在不支持 Canvas 的浏览器下有效) |
转载于:https://www.cnblogs.com/tangchangcai/p/7826617.html
如何在前端生成二维码相关推荐
- vue前端生成二维码,实现扫码下载功能
vue前端生成二维码,实现扫码下载功能 首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
- 微信小程序前端生成二维码并保存(海报同理)
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
- 前端生成二维码qrcode.js,并下载
利用qrcode.js在前端生成二维码,并下载 一.引入js包 <script type="text/javascript" src="//static.runoo ...
- 前端生成二维码与图片合成
首先前端生成二维码 使用插件完成,插件为DrawQRCode.unitypackage 合成二维码直接使用DrawQRCode 类里提供的方法即可 生成二维码的方法 DrawCode_Color32 ...
- 前端生成二维码(借助草料)
前端生成二维码. 使用草料API: generateQrCode(qrCode) {window.location.href = `https://cli.im/api/qrcode/code?tex ...
- 【vue+pc端】实现微信扫码登录pc端,后端通过微信开发平台,前端生成二维码(仅供参考)
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档 我最 ...
- vue 前端生成二维码,并转换为图片
这篇文章主要是分享下自己的收获,也是自己遇到的问题: 前端如何自己生成二维码? 前端如何将生成的二维码转成图片并展示? 如何控制二维码的显隐? 话不多说,直接上干货 base64如何转换成图片 npm ...
- vue前端生成二维码并导出PDF
1.安装插件 npm install --save qrcodejs2 (这是生成微信二维码插件) npm install html2canvas jspdf --save (这是将html页面转化为 ...
- 前端生成二维码及把页面转为图片保存到本地
以vue项目为例,其他类型项目其实也是一样的 所需components: QRCode html2canvas npm install qrcodejs2 -- save npm install ht ...
- vue前端生成二维码列表
<div v-for="(item,idx) in dataList" :key="idx"><div :id="`qrcode${ ...
最新文章
- ML_SVM的菜鸟实现
- dedecms mysql 支持_安装dedecms MySQL 支持 不支持无法使用本系统 GD 支持Off解决办法...
- 从零单排之玩转Python安全编程(II)
- 央视-腾讯发布报告:九成受访者认为AI 距离自己并不遥远
- jdk解压版_命令行版的斗地主你玩过没?
- linux shell rman删除归档_我们一起学一学渗透测试——黑客应该掌握的Linux基础
- What’s New in Virtio 1.1
- Python 自带性能强悍的标准库 itertools
- fastboot工具的操作流程
- 快速解决cmd命令行乱码问题
- 125w短波通信距离_陕西烽火通信短波及超短波产品.doc
- upc 卡德加的兔子 线段树 + 矩阵快速幂
- matlab中关于变量名的规定,在MATLAB中,以下变量名命名正确的是()A:052DB:H123C:_12D:1_D...
- 攻防世界misc 如来十三掌
- 风控决策引擎——决策流构建实战
- python中len 函数_python len
- 自己写的12306买火车票手机APP
- 数据可视化什么意思?
- 超详细的R语言热图之complexheatmap系列(1)
- HTML5之游戏DEMO - Yorhom's Game Box
热门文章
- oracle linux查看磁盘,fdisk命令_Linux fdisk命令使用详解:查看磁盘使用情况与磁盘分区...
- java socket编写服务器_Java网络学习笔记1:用(Server)Socket编写简单的客户/服务器程序...
- 图神经网络(二)GCN的性质(3)GCN是一个低通滤波器
- uint8_t / uint16_t / uint32_t /uint64_t 数据类型大总结
- 【Docker-Ubuntu】ubuntu16.04 docker 使用记录
- 信号处理深度学习机器学习_机器学习和信号处理如何融合?
- 垃圾邮件分类器_如何在10个步骤中构建垃圾邮件分类器
- 语义分析 文本矛盾点解析_关于解析文本的几点思考
- 使用doxygen和latex生成PDF文件
- 欢迎使用CSDN-markdown编辑器333333