二维码美化组件开源算法

仅需一个HTML标签,即可获得独具个性的二维码!图案随内容实时变化,让二维码更多彩~

自定义标签
<widget-qrcode value="[二维码内容]"></widget-qrcode>
实时演示
文本内容
风格模板
颜色方案

组件属性

属性说明
value二维码内容
template样式模板,可选:'default','water','diamond','hexagon','star','rect','bar','heart','glitter','fusion'
level纠错等级,可选:'M','L','Q','H'
width二维码宽度,默认:300
height二维码高度,默认:300
background-color背景色,默认:#ffffff
foreground-color前景色,默认:#000000;(多色用逗号分隔)
inner-color定位点内层颜色,默认:#000000
outer-color定位点外层颜色,默认:#000000
background-image背景图片地址
foreground-image前景图片地址
logologo图片地址
text悬浮文本内容
text-color悬浮文本颜色
text-stroke悬浮文本描边
样例展示 从此世界不再只是黑白...

二维码组件可用于网站中任何需要二维码展示的地方,如:网上支付、二维码登录、手机访问等场景。组件采用浏览器原生Web Component方案开发,无论你使用的框架是Vue、React还是Angular都能正常使用。开发者只需要在页面中加入组件库,并在需要二维码的地方插入指定标签,即可像展示Web图片一样实时展示指定内容的二维码。

算法开源

本项目致力于让你网站中的二维码更加丰富多彩,开发使用便捷高效。本人深感项目的完善仅凭一己之力是远远不够的,如果你对此感兴趣,欢迎关注本项目 或 提交代码,与我一起完善它,使它被更多人熟知和使用。你也可以将自己配置的二维码参数分享给我,有机会让更多人看到你的设计!

算法基于「MIT许可协议」开源,除需在源码中保留版权信息和许可声明外,你有权利使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本。算法持续更新中,如发现错漏或有想法建议可在此 反馈问题

<script type="text/javascript" src="https://passer-by.com/widget-qrcode/dist/widget-qrcode.min.js"></script>

Copyright © passer-by.com