实现在Node环境与浏览器环境下生成二维码
生活随笔
收集整理的這篇文章主要介紹了
实现在Node环境与浏览器环境下生成二维码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
二維碼在我們生活中隨處可見，目前也有很多第三方平臺可一鍵生成二維碼，也有很多的第三方庫支持生成二維碼。今天咱們就在Node環境下與瀏覽器環境下，實現一下二維碼的生成。
一、Node環境
目前已經有許多第三方庫可支持二維碼的生成，今天用的是我比較喜歡的一個第三方庫node-qrcode；
1. 安裝
npm install --save qrcode//或者全局安裝，都可以 npm install -g qrcode2. 使用
- 生成文件
安裝完成之后，就可以開始使用啦。首先我們先來生成一張圖片文件
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放到頁面上
頁面就可以直接顯示了
具體更多的可查閱文檔~~~~
二、瀏覽器環境
上述的第三方庫也可使用在瀏覽器中，不過需要使用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环境与浏览器环境下生成二维码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么有的标签的实际性能和仿真不一样？-
- 下一篇： 泛型＜E＞