二維碼條形碼生成的JavaScript腳本庫
更新時間：2022年07月05日 14:39:21 作者：天行無忌
這篇文章主要為大家介紹了二維碼條形碼生成的JavaScript腳本庫實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
二維碼或條形碼在日常生活中現(xiàn)在應用已經(jīng)非常普遍了，文章分享生成條形碼和二維碼的JavaScript庫。
條形碼
條形碼是日常生活中比較常見的，主要用于商品。通俗的理解就是一串字符串的集合（含字母、數(shù)字及其它ASCII字符的集合應用），用來常用來標識一個貨品的唯一性，當然還有更多更深入與廣泛的應用，像超市的商品、衣服、微信、支付寶、小程序等到處都有條形碼的廣泛應用；
安裝依賴：
npm install jsbarcode --save-dev
在 HTML 頁面上加入以下代碼：
<svg id="barcode" jsbarcode-value="123456789012" jsbarcode-format="code128"></svg>
接下來看下 JavaScript 代碼，如下：
import jsbarcode from 'jsbarcode';
const createBarcode = (value, elemTarget) => {
jsbarcode(elemTarget, "value");
};
createBarcode("#barcode", "devpoint");
運行成功的效果如下：
二維碼
相比條形碼，二維碼的使用場景也越來也多，支付碼、場所碼、小程序等等。二維碼的長相經(jīng)常是在一個正方形的框中填充各種點點或無規(guī)則小圖形塊而構(gòu)成的圖形，這種稱之為二維碼，他與一維碼最大的區(qū)別就是存儲容量大很多，而且保密性好。二維碼本質(zhì)上表現(xiàn)給大家的就是一個靜態(tài)圖片，其實是包含特字加密算法的圖形，里面存儲的是一串字符串（即字母、數(shù)字、ASCII碼等），這說明二維碼不僅存儲量大，而且存儲的內(nèi)容很廣泛，數(shù)字、字母、漢字等都可以被存儲。
安裝依賴：
npm install qrcode --save-dev
HTML：
<canvas id="qrcode"></canvas>
JavaScript：
import QRCode from "qrcode";
const createQrcode = (value, elemTarget) => {
QRCode.toCanvas(document.querySelector(elemTarget), value);
};
createQrcode("#qrcode", "devpoint");
效果如下：
以上就是二維碼條形碼生成的JavaScript腳本庫的詳細內(nèi)容，更多關(guān)于JavaScript二維碼條形碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了Rxjs監(jiān)聽使用不精確版本上線晚3小時，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在微信小程序中渲染HTML內(nèi)容3種解決方案及分析與問題解決
在開發(fā)微信小程序時我們會在小程序內(nèi)加入純HTML代碼，且HTML中包括圖片，視頻，甚至是事件，微信小程序為我們提供了3種解決方法，但它們的功能與實現(xiàn)方式與最終效果并不理想2020-01-01
這篇文章主要為大家介紹了Promise靜態(tài)四兄弟實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了精確到按鈕級別前端權(quán)限管理實現(xiàn)方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了微信小程序 獲取當前地理位置和經(jīng)緯度實例代碼的相關(guān)資料,這里附有實例代碼，及實現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了微信小程序 閉包寫法詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12
JS實現(xiàn)大數(shù)相加大數(shù)相乘示例詳解
這篇文章主要為大家介紹了JS實現(xiàn)大數(shù)相加大數(shù)相乘示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了微前端qiankun改造日漸龐大的項目教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
JavaScript自動化測試添加頁面DOM元素唯一ID方案示例
這篇文章主要為大家介紹了JavaScript自動化測試添加頁面DOM元素唯一ID方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Video.js 是一個通用的在網(wǎng)頁上嵌入視頻播放器的JS庫，Video.js自動檢測瀏覽器對HTML5的支持情況，如果不支持HTML5則自動使用Flash 播放器，推薦大家好好看看2020-02-02