Angular JS 生成動(dòng)態(tài)二維碼的方法
一、場(chǎng)景
二維碼的場(chǎng)景，很多。這里是二維碼一種小場(chǎng)景，比如分享一個(gè)鏈接，商品鏈接，項(xiàng)目鏈接，優(yōu)惠券鏈接…
技術(shù)實(shí)現(xiàn)，如果用后端實(shí)現(xiàn)，需要構(gòu)造輸出一個(gè)圖片流?；蛘吆蠖松a(chǎn)二維碼圖片，給圖片地址就好了。弊端，這個(gè)二維碼就是一個(gè)鏈接，后端的文件 IO 操作，還得考慮存儲(chǔ)。太費(fèi)力。
如果前端實(shí)現(xiàn)，這樣就很輕松了。這只是個(gè)分享二維碼，分享出去給人家掃一掃。利用前端的 canvas，這里坐下調(diào)研。
jq 封裝的 qrcode.js ,文章網(wǎng)上一大堆。
angular js ：https://github.com/monospaced/angular-qrcode
二、使用
1.安裝 angular-qrcode
git clone https://github.com/monospaced/angular-qrcode.git
cd angular-qrcode npm install
2.引入 js 文件
<script src="/node_modules/qrcode-generator/js/qrcode.js"></script> <script src="/node_modules/qrcode-generator/js/qrcode_UTF8.js"></script> <script src="/node_modules/angular-qrcode/angular-qrcode.js"></script>
并在你 angular 配置中加入對(duì)這個(gè)模塊的依賴：
angular
.module('your-module', [
'monospaced.qrcode',
]);
3.使用
在線案例：monospaced.github.io/angular-qrcode
使用元素:
<qrcode data="string"></qrcode>
具體配置參數(shù)：
<qrcode data="string" version="2" error-correction-level="Q" size="200" color="#fff" ba kground="#000"></qrcode>
作為可下載的圖片：
<qrcode data="string" download></qrcode>
作為有鏈接的二維碼：
<qrcode data="http://example.com" rel="external nofollow" ></qrcode>
download 和 href 互斥，不能同時(shí)使用。具體參數(shù)入下：
<qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" rel="external nofollow" color="{{color}}" background="{{background}}" download></qrcode>
以上所述是小編給大家介紹的Angular JS 生成動(dòng)態(tài)二維碼的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Angular.Js中ng-include指令的使用與實(shí)現(xiàn)
ng-include 指令用于包含外部的 HTML 文件。包含的內(nèi)容將作為指定元素的子節(jié)點(diǎn)。下面這篇文章主要給大家介紹了Angular.Js中ng-include指令的使用與實(shí)現(xiàn)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-05-05
對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細(xì)，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。2015-02-02
這篇文章主要為大家介紹了angular父子組件通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
angular 表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入的實(shí)現(xiàn)
表單驗(yàn)證是經(jīng)常用到一個(gè)東西，這篇文章主要介紹了angular 表單驗(yàn)證器驗(yàn)證的同時(shí)限制輸入的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要介紹了Angular7.2.7路由使用初體驗(yàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
AngularJS基礎(chǔ) ng-keyup 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keyup 指令,這里對(duì)ng-keyup指令的基本資料進(jìn)行了整理,并且附有代碼示例,有需要的朋友可以看一下2016-08-08
這篇文章主要介紹了AngularJs表單校驗(yàn)功能實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了Angular表格神器ui-grid應(yīng)用的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要詳細(xì)介紹了AngularJS內(nèi)置指令的使用方法，非常詳細(xì)，常用的一些指令操作都做了總結(jié)，有需要的小伙伴參考下2015-02-02
詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12