![70048f4f97a4e0cda485b58bd2b9fead.png](https://i-blog.csdnimg.cn/blog_migrate/10d8c81620d0793a842290b4cacb8a6b.jpeg)
又快要到快乐的周末了,我霸都丶傲天回来了鸭鸭~~
这一次的新作品是一个非常炫酷的二维码生成器、话不多说,先展示作品。
![e008b56bd0aff67a698c18de7736a1d1.png](https://i-blog.csdnimg.cn/blog_migrate/a5cc1a1acc24d123d9edabbbaaf635f8.jpeg)
![15c0b90cf49e8e74501149652182917e.png](https://i-blog.csdnimg.cn/blog_migrate/98d0dbdf46f5d7e5e7c39d8fe624b179.jpeg)
![08e6d6cee91cdcf577c95609296a6e35.png](https://i-blog.csdnimg.cn/blog_migrate/01943313c06fea9573a6a3d5cd120dd1.jpeg)
是滴,这次的作品就是生成这样二维码的工具。
支持平台
- 桌面端浏览器
- 微信、手机端浏览器
工具网址
在线生成非常炫酷的二维码工具 awesome-qrcode
开源代码地址
源代码:AJLoveChina/awesome-qrcode
工作原理
这个工具依赖了下面俩个非常火爆的Javascript库
- html2canvas
- AwesomeQRCode
其实讲真的,AwesomeQRCode已经完成了我这个工具大部分的功能,可是它使用起来不方便。而且它始终是一个工具库,而不是一款真正面向用户的产品,尤其是我特别喜欢这样文案搭配二维码的风格,可是它并没有这样的功能。
因为工作比较忙的原因,这个工具我已经开发了好几个月了,之前一直没有发布是因为创建最终图片的时候偶尔会产生图片变形,主要是那个html2canvas实在是不稳定,当然我做了一些小trick操作,让最终生成图片的时候尽量不会变形。(但是10次操作可能会有1次失败)
然后简单说一下使用教程吧~
1、打开工具网址(各位老铁可以直接微信扫描下方的二维码尝试)
![aa971edfa09e7393c05d077404ee94d7.png](https://i-blog.csdnimg.cn/blog_migrate/c7cf7f971353e0fef7950cac85d3ba70.jpeg)
2、输入文字
![eedde43e22863d264ba4340b7cddffa0.png](https://i-blog.csdnimg.cn/blog_migrate/09a16439fcea646786153c7116ba586d.png)
3、指定背景图片
![d651c9d2c06e918dfa9cd37d31cae68b.png](https://i-blog.csdnimg.cn/blog_migrate/4ddb5005ca2cdb8ab992aa711f75fad5.jpeg)
4、输入tip文字
![1f758ba25c51d9f70d573c8d2f4aded0.png](https://i-blog.csdnimg.cn/blog_migrate/e2c706c6648cfdae6ba2c4142170521c.jpeg)
5、然后下载,完成!bingo!
桌面浏览器会自动弹出图片下载,手机端(微信)需要自己长按图片保存哦~~
![49620b114ef8ef634be33acb1f08d04a.png](https://i-blog.csdnimg.cn/blog_migrate/d040403ba27dd4be614e3fb1ffde7609.jpeg)
6、最后我们上传刚刚生成的图片看看效果
![abb0179cb2719cb82b0cb64f607927a9.png](https://i-blog.csdnimg.cn/blog_migrate/8da4ae5b18e95d34bc26bc82410a303c.jpeg)
结果有点尴尬,我们最后这个二维码图片居然识别不出来。现场翻水水了~~
原因是这样子的,因为这张图片的内容色彩太丰富了,导致不管哪一种打点的颜色都会与背景色重合度比较高。打点就是二维码上面那一个个方块,方块的颜色是由工具自动识别图片然后选择的最佳的一个颜色。这个颜色主要区分与背景色,这样才能方便二维码识别。
所以我的建议是各位老铁在尝试的时候
- 选择背景色不是那么丰富的图片
- 或者二维码的内容输入少一些,少一些内容的话,对应的二维码打点就比较大,就容易识别
关于这个工具的使用问题,源代码开发问题,第三方库使用问题都可以在下方评论哦~
后续更新
目前这个工具还处于开发阶段,后面在我有时间的时候,我打算支持
- 支持切换unicode字符图案
- 支持GIF动图二维码的生成
- 目前只想到这些,如果你有好的想法可以评论下方发给我
今天自己不镇楼了,周末要做点好吃的,各位老铁~
最后谢谢 @天边的爱 提供的UI支持~
so,就是这样,bye~~
本文中使用的unicode图案来自傲天君的另一个作品
awesome-unicode-symbolajlovechina.github.io![e5b68b4211cea1d58c170134d0fe4d5d.png](https://i-blog.csdnimg.cn/blog_migrate/26a3d35d7920ef1288881110af16bec5.png)