二維碼的應用在現在生活和項目中應用的越來越多，下面就對二維碼的生成及使用做一下總結。
一、二維碼的生成
qrcode.js及jquery-qrcode.js實作生成二維碼：
qrcode.js github位址：
qrcodejquery-qrcode.js github位址：
jquery-qrcodeqrcode.js和query-qrcode.js的差別是：qrcode.js可以指定生成的二維碼深色、淺色區域塊的顔色，jquery-qrcode.js隻能預設黑白兩色
qrcode.js支援clear()和makeCode()方法，用于便捷清空二維碼、更換二維碼，jquery-qrcode.js不支援
下面主要說qrcode.js
qrcode.js生成二維碼的原理：qrcode.js在用于生成二維碼的容器#qrcode内生成一個canvas标簽和一個img标簽，并且以base64的編碼格式描述圖檔資訊。
生成二維碼效果圖
html代碼
js代碼
點選按鈕生成的二維碼儲存到本地
實作原理：将base64編碼格式的圖檔轉換成canvas畫布，利用toDataUrl()方法将canvas畫布資訊轉化為可供下載下傳的url資訊
toDataUrl()，建構下載下傳連結并模拟點選，将圖檔下載下傳到本機
二、基于qrcode.js案例demo實作将生成的二維碼儲存為本地圖檔
1、建構一個用于下載下傳的空a标簽
将base64圖檔建構成畫布并模拟點選a标簽下載下傳
當我們在清單中使用二維碼的時候，需要先清空上一個二維碼再生成一個新的二維碼，此時就需要用到qrcode的api,qrcode.clear()或者qrcode.makeCode(new url)
三、qrcode在vue項目中的使用
vue使用qrcode，canvas生成二維碼圖檔，并下載下傳
1、npm install qrcode --save-dev //安裝qrcode包
2、import qrcode from 'qrcode' //在main.js中引用
3、元件中使用并生成二維碼
點選下載下傳二維碼
四、長按二維碼跳轉頁面
隻需要判斷是長按還是點選事件即可，然後在判斷是長按之後跳轉頁面
另外一篇文章我寫的是：判斷長按還是點選事件，可以根據是長按還是點選事件來做識别二維碼的功能
https://www.jianshu.com/writer#/notebooks/20757449/notes/22099207五、判斷是用什麼裝置掃描的二維碼
我寫過一篇關于navigator userAgent的文章，可以通過判斷navigator userAgent的值來判斷掃描二維碼的裝置的浏覽器資訊。
https://www.jianshu.com/writer#/notebooks/20757449/notes/29059431六、二維碼的資訊内容存在中文
我們實驗的時候發現不能識别中文内容的二維碼，如果有中文内容，如果在二維碼的内容頁面有需求使用二維碼内容中的中文資訊，則需要對該值進行解碼。
未解碼
解碼後
使用
decodeURIComponent解碼
七、為了隐去滑鼠懸浮在二維碼上邊的時候顯示二維碼内容，需要将生成的二維碼轉成base64格式的圖檔
轉化代碼
效果圖
八、在目前的圖檔上添加文字或logo處理
代碼實作
效果
關于二維碼的git位址：
[email protected]:wangAlisa/qrcode.git參考文檔:
https://blog.csdn.net/u011127019/article/details/51226104大家如果有什麼好的建議或者意見，請多多指教！