快捷導(dǎo)航

Angular JS 生成動(dòng)態(tài)二維碼的方法

更新時(shí)間：2017年02月23日 09:48:14 作者：泥瓦匠BYSocket

這篇文章主要介紹了Angular JS 生成動(dòng)態(tài)二維碼的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、場(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)站的支持！

您可能感興趣的文章: