前端生成二維碼插件jquery.qrcode.js

2021-02-15 前端圈兒

本期介紹一個前端動態生成二維碼的插件 jquery.qrcode.js,jquery.qrcode.js 是一個能夠在客戶端生成矩陣二維碼 QRCode 的 jquery 插件 ,使用它可以很方便的在頁面上生成二維碼。

引入

將 jquery.qrcode.min.js 和 jquery 直接引入

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

創建 dom

創建一個 DOM 元素去包含生成 qr 碼

<div id="qrcode"></div>

生成二維碼

在此容器中的添加 qrcode

<script>
    jQuery(function(){
    jQuery('#qrcode').qrcode("https://www.baidu.com/");
})
</script>

進階用法指定二維碼的生成方式:
//使用table生成
jQuery('#qrcode').qrcode({
    render: "table",
    text: "https://www.baidu.com/"
});

//使用canvas生成
jQuery('#qrcode').qrcode({
    render: "canvas",
    text: "https://www.baidu.com/"
});

指定生成二維碼的大小:

可以在調用函數的同時輸入想要生成二維碼的寬度和高度即可指定生成的二維碼的大小。

//生成100*100(寬度100,高度100)的二維碼
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替換為table
    width: 100,
    height: 100,
    text: "https://www.baidu.com/"
});

指定生成二維碼的色彩樣式:

可以在調用函數的同時輸入想要生成二維碼的前景色和背景色即可指定生成的二維碼的色彩樣式。

//生成前景色為紅色背景色為白色的二維碼
jQuery('#qrcode').qrcode({
    render: "canvas", //也可以替換為table
    foreground: "#C00",
    background: "#FFF",
    text: "https://www.baidu.com/"
});

中文 ULR 生成方法:
jQuery("#output").qrcode(encodeURI("http://中文中文"));//使用encodeURI進行轉碼

「感謝閱讀,後面會不斷分享自己工作中用到的開源庫,大家一起交流學習」

有錢的捧個錢場,沒錢的捧個人場

相關焦點

  • JS+jQuery+qrcode.js實現前端生成二維碼
    實現過程是頁面打開時默認展示一個二維碼,用戶可以更改文本內容,更改生成二維碼的參數,例如尺寸、前景色、背景色等,點擊【生成二維碼】按鈕即可在下方生成一個二維碼,用手機微信或者QQ、百度等都可以識別輸入的內容,當輸入網址時還可以直接跳轉到網站頁面。下圖為效果樣式。
  • 小碼二維碼助手-二維碼在線生成工具
    於是各種資料搜集,最後選中了兩個前端開發的工具用來製作一個二維碼在線生成的工具,在此把我痛苦的過程記錄下來:首先,我過濾了下使用的插件:1.SUI Mobile-因為我想要開發一個適配移動端的頁面,所以選擇了這個主頁:http://m.sui.taobao.org/自述:輕量、小巧、精美的UI庫,方便迅速搭建手機H5應用,也非常適合開發跨平臺Web
  • Vue—前端生成二維碼
    與後端生成二維碼相比,前端生成二維碼更具有靈活性,下面就介紹兩種前端生成二維碼的方式,兩種方式相比之下,vue-qr比qrcode多了一個再中間添加
  • (進階篇)php生成帶logo二維碼方法小結
    一、使用的類庫1、phpqrcode(php庫)2、qrcode.js(javascript庫) 二、phpqrcode的使用只用php的類庫,也就是二維碼的生成在後臺操作。$name.'.png');//輸出帶logo的二維碼圖片三、qrcode.js的使用使用qrcode.js在前端直接生成二維碼,首先需要下載jquery.qrcode.jsqrcode的使用也很簡單:var length = size*80;//設置二維碼大小length
  • 小程序中生成二維碼工具
    前言在近期的小程序開發中,有一個離線生成二維碼的需求。
  • 使用python-qrcode生成圖形二維碼
    ()          # 保存二維碼到具體路徑四.示例1import qrcode23# 創建對象 設置大小和邊框大約30%或者更少的錯誤會被更正4qr = qrcode.QRCode(5box_size=10,border=2,error_correction=qrcode.constants.ERRORCORRECTH)6content
  • 跨瀏覽器純JavaScript QRCode二維碼插件【附DEMO源碼】
    在微信時代裡,二維碼是再常見不過的東西了,我們為了顯示自己的與眾不同,會嘗試去做一些比較特殊的二維碼圖形,今天,我就來跟大家分享一個二維碼繪畫插件
  • 小程序生成二維碼
    需求一:二維碼信息固定,為了性能優化,一般會建議二維碼由服務端生成,然後前端返回二維碼的圖片,這樣,我們可以結合小程序的wx.previewimage()這個方法可以方便下載和預覽二維碼;需求二:動態生成二維碼信息,由於很多詳情頁面都需要根據頁面數據的參數動態生成二維碼,所以,這個時候可以前端完成二維碼生成,也可以服務端完成,但是對別人的依賴最後的結果就是自己的無奈
  • 前端常用插件、工具類庫匯總,不要重複造輪子啦!!!
    那麼,被抽離出來獨立完成功能,通過API或配置項和其他部分交互,便形成了插件。下面這些是我在工作中積累的一些常用的前端開源插件,這裡只是羅列出來,詳細的用法各個插件官網或者Gayhub都有介紹。注意:往往一個解決方案會有多個插件,需要讀者根據自己的實際業務需求進行甄別選用,歡迎留言交流和補充。
  • PHP QR Code生成二維碼
    二行代碼解決二維碼生成問題先來說說二維碼是神馬東西        二維條碼/二維碼(2-dimensional bar code)是用某種特定的幾何圖形按一定規律在平面
  • Python qrcode模塊(生成二維碼)
    今天為大家帶來了Python qrcode模塊生成二維碼的實戰小案例,感興趣的同學一起來學一下吧!
  • 前端實用插件大全,你知道嗎?
    帶進度條文件上傳插件用法<script src="jquery.min.js" type="text/javascript"></script><script src="jquery.uploadifive.min.js" type="text/javascript"></script><link
  • 籠統的前端
    underscore, 但是會延遲執行,某些場景下,性能會有很大的提升seajs: 前端模塊加載器,解決模塊化、依賴等問題jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫js.js: Javascript 實現的 javascript JITjquery-ui: jQuery 團隊開發的 UI 相關的前端庫,功能強大
  • python:qrcode 一個生成二維碼的庫
    qrcode是一個生成二維碼的庫;二維碼,具有可讀性快、存儲量大等特點。代碼由白色背景上以方形圖案排列的黑色模塊組成。編碼的信息可以由任何類型的數據組成(例如,二進位、字母數字或漢字符號)。6Installing collected packages: qrcode7    Running setup.py install for qrcode ... done8Successfully installed qrcode-7.3.1快捷使用導入指定庫後,利用快捷函數make生成一個二維碼存在本地1import qrcode
  • 前端知識圖譜
    underscore, 但是會延遲執行,某些場景下,性能會有很大的提升seajs: 前端模塊加載器,解決模塊化、依賴等問題jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫js.js: Javascript 實現的 javascript JITjquery-ui: jQuery 團隊開發的 UI 相關的前端庫,功能強大
  • 【史上最全】前端開發全面知識庫
    ,看真相Framework7: 前端框架,是開發人員可以基於 web 技術構建 IOS7 程序regulex: 用於生成 正則表達式 的可視化流程圖markdown-it: 新型 Markdown 解析器,快速,支持插件multiline: 用於 Javascript 中的多行文本,類似於 Ruby 的 HERE Docscreenfull.js: 全屏插件,
  • 有哪些必看的 JS 庫?
    HTML5 API 應用History.js – gracefully supports the HTML5 History/State APIsjquery-pjax – pushState+ajaxjquery-address – Deep LinkingNotify.js(Web Notifications API)
  • 我的 Chrome 版本不支持生成二維碼,30 分鐘怒懟了一個插件,附源碼
    "background.js"]},編寫 js ,為瀏覽器右鍵菜單添加按鈕,contexts 是 page 類型,表示選中對象是頁面會啟動這個按鈕chrome.contextMenus.create({    "title": "為此頁面生成二維碼",
  • 基於HTML5 canvas的純JS二維碼生成
    通過qrious.js可以快速生成各種二維碼,你可以控制二維碼的尺寸顏色,還可以將生成的二維碼進行Base64編碼。安裝可以通過bower或npm來安裝qrious.js二維碼插件。$ npm install $ bower install 使用方法使用該二維碼生成插件需要在頁面中引入qrious.js文件。
  • Chrome右鍵來個生成二維碼
    來源: 編程如畫初體驗外媒報導 Chrome 已經支持原生為網頁生成二維碼,小編迫不及待的搞起。chrome.contextMenus.create({    "title": "為此頁面生成二維碼",    "contexts": ["page"],    "onclick": qrcode});這樣就完成了第一步哦