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