前言

二维码在我们生活中随处可见，目前也有很多第三方平台可一键生成二维码，也有很多的第三方库支持生成二维码。今天咱们就在Node环境下与浏览器环境下，实现一下二维码的生成。

一、Node环境

目前已经有许多第三方库可支持二维码的生成，今天用的是我比较喜欢的一个第三方库node-qrcode；

1. 安装

npm install --save qrcode//或者全局安装，都可以
npm install -g qrcode

2. 使用

生成文件

安装完成之后，就可以开始使用啦。首先我们先来生成一张图片文件

const QRcode = require("qrcode"); QRcode.toFile('./1.jpg', "欢迎来到小黄同学的个人空间~", err => {console.log(err);
})

这样运行之后，就会在根目录下生成一张名为1.jpg的二维码图片

生成DataURL

还可以生成DataURL

const QRcode = require("qrcode");QRcode.toDataURL("欢迎来到小黄同学的个人空间~", (err,url) => {console.log(url);
})

这样就得到了DataURL

咱们再把DataURL放到页面上

<body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAYAAAB1PADUAAAAAklEQVR4AewaftIAAATTSURBVO3BQY4cSRIEQdNA/f/Lun30UwCJ9GqSsyaCP1K15KRq0UnVopOqRSdVi06qFp1ULTqpWnRSteikatFJ1aKTqkUnVYtOqhadVC06qVr0yUtAfpOaN4BsUjMBeUPNBOQ3qXnjpGrRSdWik6pFnyxTswnIDZBJzQRkUnMDZFKzSc0E5Ak1m4BsOqladFK16KRq0SdfBuQJNU+omYBMaiYgk5ongDyh5kbNG0CeUPNNJ1WLTqoWnVQt+uQ/Dsik5g01E5BJzQ2QSc1/yUnVopOqRSdViz75xwGZ1NwAuVFzA+QJIP9PTqoWnVQtOqla9MmXqfkmNROQGzUTkBsgk5oJyBNqNqn5m5xULTqpWnRSteiTZUB+E5BJzQTkbwZkUnMD5G92UrXopGrRSdWiT15S8yepmYBMajYBmdTcqJmAPKHmX3JSteikatFJ1aJPXgIyqZmATGomIJOaCcikZpOaCcgTQG7UfBOQSc0NkEnNppOqRSdVi06qFn2yDMgNkCfUTEAmNTdAJjUTkCfU3AB5Qs0E5EbNDZAngExq3jipWnRSteikatEnX6ZmAjKpuQHyhJobIJOaJ4BMat4AsknNBORGzaaTqkUnVYtOqhbhj7wA5EbNBORGzQ2QGzUTkDfU3ACZ1ExAbtQ8AWRSMwF5Q80bJ1WLTqoWnVQt+mSZmifU3AB5AsikZgIyqZmAfJOa36TmBsimk6pFJ1WLTqoWffJlQN5QcwPkDSCTmgnIpOYNIJOaGyA3QCY1E5DfdFK16KRq0UnVIvyRF4A8oWYCMqmZgExqNgG5UTMB2aTmBsikZgJyo+Y3nVQtOqladFK1CH/kDwJyo2YCcqPmBsgTajYBeULNBGSTmk0nVYtOqhadVC365CUgT6iZ1NwAmdTcAJnU3Ki5AXKj5gbIpGYCMqm5UTMBmdRMQH7TSdWik6pFJ1WL8EcWAblRMwG5UTMBmdTcAHlCzRtAJjU3QG7UTEBu1ExAnlDzxknVopOqRSdViz55CcikZgJyo2YCMgF5Asik5gbIBGRSMwG5UXMD5Dep+U0nVYtOqhadVC3CH1kE5Ak1bwCZ1ExAJjV/EpAbNROQSc0TQJ5Q88ZJ1aKTqkUnVYvwR14AMqmZgExqJiCTmgnIN6l5AsikZgIyqbkBsknNDZAbNW+cVC06qVp0UrXok5fU3Ki5UXOj5gbIjZongExqJjVvALlR8wSQv8lJ1aKTqkUnVYs+eQnIb1IzqZmATEAmNROQSc0E5Ak1N2omIDdAJjWb1Gw6qVp0UrXopGrRJ8vUbALyhJon1ExAvgnIE2qeAPInnVQtOqladFK16JMvA/KEmieA3KiZgNyomYBMaiYgE5A3gHyTmm86qVp0UrXopGrRJ/84NW+omYC8oWYCMqmZgExqJiBPqJmATEBu1LxxUrXopGrRSdWiT/5xQN4AMqmZgExANqm5UTMBmdRMQG7UTEA2nVQtOqladFK16JMvU/NNam6A3KiZgExq3lBzA+QJNW8AmdRsOqladFK16KRqEf7IC0B+k5oJyBNqJiC/Sc0NkDfU3AC5UfPGSdWik6pFJ1WL8EeqlpxULTqpWnRSteikatFJ1aKTqkUnVYtOqhadVC06qVp0UrXopGrRSdWik6pFJ1WL/gc6+jg66opcIAAAAABJRU5ErkJggg==">
</body>

页面就可以直接显示了

具体更多的可查阅文档~~~~

二、浏览器环境

上述的第三方库也可使用在浏览器中，不过需要使用Webpack等打包工具配合使用，相对来说麻烦一点。这里可以使用另外一个专门用于浏览器下的第三方库 qrcodejs；

1. 引入

可以直接使用CDN引入

<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>

2. 使用

<body><div id="divcode"></div><script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script><script>var qrcode = new QRCode(document.getElementById("divcode"), {text: "欢迎来到小黄同学的个人空间~",width: 128,height: 128,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H // 二维码纠错能力的级别});</script>
</body>

通过上述代码，就可以在浏览器端生成一个二维码了

3. Demo

这里我们通过该第三方库，来做一个小demo；具体场景就是，页面有输入框和按钮，在输入了内容之后，点击生成，便可以生成一个二维码，点击重新生成，便可以重新输入；

<body><div class="wrapper"><h2 style="text-align: center;">二维码生成器</h2><p><input type="text" name="content" class="inp" placeholder="请输入所需要生成二维码的内容..."><button class="btn">开始生成</button></p><div id="qrcode"><span class="generating">正在生成中...</span></div></div><script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script><script>const oInp = document.querySelector(".inp");const oBtn = document.querySelector(".btn");const oQRcode = document.querySelector("#qrcode");let value;function delay() {return new Promise(resolve => {setTimeout(() => {document.querySelector(".generating").style.display = "none";resolve();}, 500)})}oInp.oninput = function () {value = this.value.toString();}async function generate() {if (this.innerText === "重新生成") {oInp.value = "";oQRcode.innerHTML = "<span class='generating' style='display:none;'>正在生成中...</span>";this.innerText = "开始生成"return;}document.querySelector(".generating").style.display = "block";await delay();var qrcode = new QRCode(oQRcode, {text: value,width: 128,height: 128,colorDark: "#000000",colorLight: "#ffffff",correctLevel: QRCode.CorrectLevel.H});oBtn.innerText = "重新生成";};oBtn.onclick = generate;</script>
</body>

体验小demo：点击去体验

结尾

今天就分享这么多啦~ 其他的知识，大家可以自行查阅文档哦~~~

实现在Node环境与浏览器环境下生成二维码相关推荐

在delphi下生成二维码
在delphi下生成二维码,可以使用TDelphiZXingQRCode,该开源代码地址为:https://github.com/foxitsoftware/DelphiZXingQRCode/tre ...
微信内置浏览器动态生成二维码并长按识别
现如今围绕微信生态相关开发已经非常常见,本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别以及通过 html2canvas 生成图片并长按保存说几个知识点微信 ...
jenkins 下自动构建生成二维码(不使用蒲公英 fir)
最近蒲公英每个版本只能下载10次了. 我感觉未来免费的东西会越来越不好,所以准备利用Tengine或者tomcat搭建自己的下载平台. 先说下如何实现吧: 首先jenkins自动打包apk后, 把a ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
Linux下使用命令生成二维码
首先在保证linux联网的情况下安装 qrencode yum -y install qrencode 使用命令生成二维码(-s 后面的数字是二维码的大小这里的18 是 18*18) qrencod ...
java生成二维码打印到浏览器
java生成二维码打印到浏览器解决方法: pom.xml的依赖两个jar包: <!-- https://mvnrepository.com/artifact/com.google.zxing/ ...
JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
通过web系统实现淘宝营销引流，小说或者视频上传之后自动生成二维码，通过二维码分享之后引入微信或者扣扣加群，群满自动切换到下一个，以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
thinkphp6下使用phpqrcode生成二维码
系!首先你要有果只库! 实在稳矛到你就@我,我发比你.放在thinkphp6的这个文件夹内extend.然后控制器写只方法就得爹. /*** 生成二维码* @return string*/public ...

实现在Node环境与浏览器环境下生成二维码

前言

一、Node环境

1. 安装

2. 使用

二、浏览器环境

1. 引入

2. 使用

3. Demo

结尾

实现在Node环境与浏览器环境下生成二维码相关推荐

最新文章

热门文章