如何在前端生成二维码

 第一步:

引入:<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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue --- Vue中的路由跳转问题

import Vue from vue import Router from vue-router // 前2个导入时vue框架自带的 import SayHi from /components/SayHi // 这个导入是自己写的位于components下的sayHiVue.use(Router) // 用到了vue的Router模块 export default new Router({routes: [{path: /say_hi,…

水瓶与天蝎的八年爱恋(图

新浪网友&#xff1a;kinkihi 水瓶与天蝎的八年爱恋我水瓶&#xff0c;他蝎子。我们相恋8年&#xff0c;确切的说中间有5年在一起的时间不超过6个月&#xff0c;两人一直处于异地状态&#xff0c;说出来可能没几个人能信&#xff0c;我们是这样走过来的。我一直是严格要求自己&…

Controller上使用@CrossOrigin注解

本文首次发布于My Blog,作者Ian,转载请保留原文链接。 就是一个跨域的注解 Spring MVC 从4.2版本开始增加了对CORS的支持 CORS介绍请看这里&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 参考isea533&#xff1a;https://blog.csdn.net/…

vue --- 基本的表单元素

<template> <div>input: <input typetext v-modelinput_value />,输入的值: {{input_value}}<hr />text area: <textarea v-model"textarea_value"></textarea>,输入的值: {{textarea_value}}<hr/>radio:<input typera…

相关名词浅析

分布式&#xff1a;一个业务分拆多个子业务&#xff0c;部署在不同的服务器上集群&#xff1a;同一个业务&#xff0c;部署在多个服务器上转载于:https://www.cnblogs.com/yuki-l/p/9202819.html

Beta 讨论分析——持续更新ing

wonderland Beta 讨论分析 标签&#xff08;空格分隔&#xff09;&#xff1a; 软工实践 wonderland 主要工作: info信息&#xff1a; 1、关联账号界面:hbb 2、标签检索界面:hbb 3、近期活跃度(cf、hdu):橘子 4、增加个人头像 wiki &#xff1a; 点赞排行、阅读量排行返回数据 …

vue --- 提交表单到服务器

<template> <div><textarea v-modelcontent></textarea><br/><input typebutton clicksubmit value留言 /> </div> </template><script> export default {data () {return {content: }},methods: {submit: function () …

节约内存:Instagram的Redis实践(转)

一、问题&#xff1a; 数据库表数据量极大&#xff08;千万条&#xff09;&#xff0c;要求让服务器更加快速地响应用户的需求。二、解决方案&#xff1a;1.通过高速服务器Cache缓存数据库数据2.内存数据库三、主流解Cache和数据库对比&#xff1a;从以上各数据可知&#xff0c…

多数公司容易犯的5个大数据错误

多数公司容易犯的5个大数据错误 如今&#xff0c;大数据革命驱动了现代工业发展&#xff0c;每天都有越来越多的企业采用大数据技术。然而&#xff0c;尽管大量数据已经存在和应用了很长时间&#xff0c;但如何使用它&#xff0c;仍然存在许多严重的错误。 以下是企业容易犯的5…

vue --- SPA模式的组件

SPA&#xff1a;单页应用(Single Page App),具体好处,百度搜索 我们可以想象一个场景&#xff0c;有两个页面,每个页面的头部都有一张 Logo 图片.如果每次都写成原始 HTML 的话,代码就会重复. // 页面1的代码如下:<div classlogo><img srcurl> </div>// 页面…

(2.15)备份与还原--使用作业备份、清理过期备份、清理历史记录、事务日志是否备份过...

一、建立作业备份数据库 打开SQL SERVER MANAGEMENT STUDIO&#xff0c;启动SQL SERVER代理服务&#xff08;注意在“控制面板-管理工具-服务”中设置SQL SERVER AGENT的启动类型为自动&#xff09;。启动后点击“作业-新建作业”&#xff0c;弹出一个作业属性的窗口&#xff0…

javascript+HTML+CSS面试题

今天参加面试&#xff0c;考了我三个小时&#xff0c;考晕了&#xff0c;赶紧补习补习javascript的知识&#xff01;&#xff08;另&#xff1a;人事部明明说招HTML5CSS3jQuery&#xff0c;考1个半小时左右&#xff0c;怎么变成了考传统DIVCSSjavascript啦&#xff0c;呜呜呜~~…

android 对话框

android 8种对话框&#xff08;Dialog&#xff09;使用方法汇总 作者&#xff1a;gzdaijie本文为作者原创&#xff0c;转载请注明出处&#xff1a;https://www.cnblogs.com/gzdaijie/p/5222191.html 目录 1.写在前面2.代码示例2.1 普通Dialog&#xff08;图1与图2&#xff09;2…

Java 多线程 之 suspend挂起 线程实例

http://www.verejava.com/?id16992945731073 package com.suspend.resume; /*题目: 人们在火车站的售票窗口排队买火车票1. 北京西站开门2. 打开售票窗口3. 北京西站有10张去长沙的票4. 打开2个售票窗口, 5 假设每个售票窗口每隔1秒钟买完一张票1. 根据 名词 找类人们(Person…

算法 --- 插入排序的JS实现

let A [5, 2, 4, 6, 1 ,3];// 插入排序 insertionSort (A) > {console.log("原数组>>>", A);for (let j1; j<A.length; j) {let key A[j];i j -1;while ( i > -1 && A[i] > key) {A[i1] A[i];i i-1;}A[i 1] key;}console.log(&q…

SAFESHE错误

今天写驱动编译的时候遇到一个问题&#xff0c;link一个比较老的lib时&#xff0c;报错&#xff1a; error LNK2026: module unsafe for SAFESEH image 解决办法&#xff1a; 在Source文件中加入一行 NO_SAFESEHTRUE 编译时候执行 build -cZg转载于:https://www.cnblogs.com/fa…

python之正则(一)

1.常用正则表达式: \d:数字[0-9] &#xff0c;实例:a\dc -> a1c\D:非数字[^\d],实例:a\Dc -> abc\s:空白字符[<空格>\t\r\n\f\v] 实例:a\sc ->a c\S:非空白字符[^\s] 实例:a\Sc ->abc\w:单词字符[A-Za-z0-9_] 实例:a\wc ->abc\W:非单词字符[^\W] *:匹配前…

逻辑读、物理读

逻辑读、物理读、预读的基本概念转载于:https://www.cnblogs.com/mySerilBlog/p/9208215.html

算法 --- 归并排序的js实现

let mergeSort (A, p, q, r) > {console.log("原数组>>>", A);let n1 q - p 1;let n2 r - q;let L new Array();let R new Array();for (let i 1; i < n1 1; i) {L[i -1] A[p i - 1];}for (let j 1; j < n2 1; j) {R[j-1] A[q j];}L[…

c#中的代理和事件

事件&#xff08;event&#xff09;是一个非常重要的概念&#xff0c;我们的程序时刻都在触发和接收着各种事件&#xff1a;鼠标点击事件&#xff0c;键盘事件&#xff0c;以及处理操作系统的各种事件。所谓事件就是由某个对象发出的消息。比如用户按下了某个按钮&#xff0c;某…