一、場景
二維碼的場景，很多。這里是二維碼一種小場景，比如分享一個鏈接，商品鏈接，項目鏈接，優(yōu)惠券鏈接…
技術(shù)實現(xiàn)，如果用后端實現(xiàn)，需要構(gòu)造輸出一個圖片流。或者后端生產(chǎn)二維碼圖片，給圖片地址就好了。弊端，這個二維碼就是一個鏈接，后端的文件 IO 操作，還得考慮存儲。太費力。
如果前端實現(xiàn)，這樣就很輕松了。這只是個分享二維碼，分享出去給人家掃一掃。利用前端的 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-qrcodenpm 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 配置中加入對這個模塊的依賴：
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ù)入下：
<qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" rel="external nofollow" color="{{color}}" background="{{background}}" download></qrcode>以上所述是小編給大家介紹的Angular JS 生成動態(tài)二維碼的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
