QR Code

常用的二维码生成方式有使用软件/在线固定生成，也有调用API动态生成。固定二维码不灵活，调用API会受限于网络和主机性能，既然如此不妨用“富客户端”的思想，将二维码的生成过程迁移到前端来，让性能足够强的客户端设备分担服务器的压力。

在一番搜索下香菇找到了一个叫做qrcode的使用javascript编写的二维码生成组件：https://github.com/aralejs/qrcode

阅读文档后了解到该模块支持<script>标签引用，暴露全局变量为AraleQRCode。

实际上示例提到该组件支持默认，table，canvas，svg四种方式绘制二维码，其中后三种支持添加中置logo图片，菇选择了最近在玩的canvas方式绘制，例：

<script src="/usr/themes/yodu/js/qrcode.js"></script>
<div id="erwei_qr"></div>
<script>
var qrnode = new AraleQRCode({
 render: 'canvas',  //绘制方式
 correctLevel: 0,   //容错级别：0 1 2 3
 text: '/canvas-colorful-qrcode.html',  //二维码内容
  size: 128,  //尺寸
  background: '#eeeeee',  //背景填充色
 foreground: '#667766',  //前景填充色
 pdground: '#FF7575',  //三个角标颜色
  image : '/usr/themes/yodu/img/qrlogo.png',  //中间logo地址
  imageSize : 28  //logo尺寸
});
document.getElementById('erwei_qr').appendChild(qrnode);
</script>

如上示例，内容、颜色、logo、尺寸等都可以结合后端脚本动态替换，十分方便，且绘制过程在加载js文件后完全由浏览器承担。本站文章下方二维码便是用此方式生成。嗯！真是太棒辣！(๑•̀ㅂ•́)و✧

版权属于：香菇
本文链接：https://blog.siitake.cn/canvas-colorful-qrcode.html
本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！