二維碼美化組件開源算法
僅需一個HTML標(biāo)簽，即可獲得獨(dú)具個性的二維碼！圖案隨內(nèi)容實時變化，讓二維碼更多彩~
自定義標(biāo)簽
<widget-qrcode value="[二維碼內(nèi)容]"></widget-qrcode>
實時演示
文本內(nèi)容
風(fēng)格模板
顏色方案
| 屬性 | 說明 |
|---|---|
| value | 二維碼內(nèi)容 |
| template | 樣式模板,可選：'default','water','diamond','hexagon','star','rect','bar','heart','glitter','stroke','fusion' |
| level | 糾錯等級,可選：'M','L','Q','H' |
| width | 二維碼寬度，默認(rèn)：300 |
| height | 二維碼高度，默認(rèn)：300 |
| background-color | 背景色，默認(rèn)：#ffffff |
| foreground-color | 前景色，默認(rèn)：#000000;（多色用逗號分隔） |
| inner-color | 定位點(diǎn)內(nèi)層顏色，默認(rèn)：#000000 |
| outer-color | 定位點(diǎn)外層顏色，默認(rèn)：#000000 |
| background-image | 背景圖片地址 |
| foreground-image | 前景圖片地址 |
| logo | logo圖片地址 |
| text | 懸浮文本內(nèi)容 |
| text-color | 懸浮文本顏色 |
| text-stroke | 懸浮文本描邊 |
樣例展示
從此世界不再只是黑白...
二維碼組件可用于網(wǎng)站中任何需要二維碼展示的地方，如：網(wǎng)上支付、二維碼登錄、手機(jī)訪問等場景。組件采用瀏覽器原生Web Component方案開發(fā)，無論你使用的框架是Vue、React還是Angular都能正常使用。開發(fā)者只需要在頁面中加入組件庫，并在需要二維碼的地方插入指定標(biāo)簽，即可像展示W(wǎng)eb圖片一樣實時展示指定內(nèi)容的二維碼。
算法開源
本項目致力于讓你網(wǎng)站中的二維碼更加豐富多彩，開發(fā)使用便捷高效。本人深感項目的完善僅憑一己之力是遠(yuǎn)遠(yuǎn)不夠的，如果你對此感興趣，歡迎關(guān)注本項目 或 提交代碼，與我一起完善它，使它被更多人熟知和使用。你也可以將自己配置的二維碼參數(shù)分享給我，有機(jī)會讓更多人看到你的設(shè)計！
算法基于「MIT許可協(xié)議」開源，除需在源碼中保留版權(quán)信息和許可聲明外，你有權(quán)利使用、復(fù)制、修改、合并、出版發(fā)行、散布、再授權(quán)及販?zhǔn)圮浖败浖母北尽?/span>算法持續(xù)更新中，如發(fā)現(xiàn)錯漏或有想法建議可在此 反饋問題。
<script type="text/javascript" src="https://passer-by.com/widget-qrcode/dist/widget-qrcode.min.js"></script>
Copyright © passer-by.com
